diff --git a/src/App.jsx b/src/App.jsx
index c516cb81a..c15009adc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
+import { Tabs } from './components/Tabs/Tabs';
 
 export const tabs = [
   { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
@@ -9,36 +10,20 @@ export const tabs = [
   { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
 ];
 
-export const App = () => (
-  <div className="section">
-    <h1 className="title">Selected tab is Tab 1</h1>
+export const App = () => {
+  const [activeTabId, setActiveTabId] = useState(tabs[0].id);
 
-    <div data-cy="TabsComponent">
-      <div className="tabs is-boxed">
-        <ul>
-          <li className="is-active" data-cy="Tab">
-            <a href="#tab-1" data-cy="TabLink">
-              Tab 1
-            </a>
-          </li>
+  const activeTab = tabs.find(el => el.id === activeTabId);
 
-          <li data-cy="Tab">
-            <a href="#tab-2" data-cy="TabLink">
-              Tab 2
-            </a>
-          </li>
+  return (
+    <div className="section">
+      <h1 className="title">Selected tab is {activeTab.title}</h1>
 
-          <li data-cy="Tab">
-            <a href="#tab-3" data-cy="TabLink">
-              Tab 3
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div className="block" data-cy="TabContent">
-        Some text 1
-      </div>
+      <Tabs
+        tabs={tabs}
+        activeTabId={activeTabId}
+        onTabSelected={setActiveTabId}
+      />
     </div>
-  </div>
-);
+  );
+};
diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx
index 4b321a091..24e078aba 100644
--- a/src/components/Tabs/Tabs.jsx
+++ b/src/components/Tabs/Tabs.jsx
@@ -1 +1,42 @@
-export const Tabs = () => {};
+export const Tabs = ({ tabs, activeTabId, onTabSelected }) => {
+  const selectedTab = id => {
+    if (id !== activeTabId) {
+      onTabSelected(id);
+    }
+  };
+
+  const active =
+    tabs.find(el => el.id === activeTabId) === undefined
+      ? tabs[0].id
+      : activeTabId;
+
+  const { content } = tabs.find(el => el.id === active);
+
+  return (
+    <div data-cy="TabsComponent">
+      <div className="tabs is-boxed">
+        <ul>
+          {tabs.map(tab => (
+            <li
+              className={tab.id === active ? 'is-active' : ''}
+              data-cy="Tab"
+              key={tab.id}
+            >
+              <a
+                href={`#${tab.id}`}
+                data-cy="TabLink"
+                onClick={() => selectedTab(tab.id)}
+              >
+                {tab.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="block" data-cy="TabContent">
+        {content}
+      </div>
+    </div>
+  );
+};