diff --git a/.DS_Store b/.DS_Store
index 937b0d3..2b247ee 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/components/kit/components/elements/index.tsx b/components/kit/components/elements/index.tsx
index c1f1aef..70ff14c 100644
--- a/components/kit/components/elements/index.tsx
+++ b/components/kit/components/elements/index.tsx
@@ -47,11 +47,17 @@ const Elements: FC = () => {
         },
         {
             title: 'Skeleton',
-            isNew: true,
             items: 3,
             img: 'images/sections/skeleton.png',
             link: '/components/skeleton',
         },
+        {
+            title: 'Tabs',
+            isNew: true,
+            items: 3,
+            img: 'images/sections/tabs.png',
+            link: '/components/tabs',
+        },
     ];
 
     return <SectionDesc withPub id="elements" items={elementsSection} title="Elements" />;
diff --git a/components/kit/components/elements/tabs/BasicTabs.tsx b/components/kit/components/elements/tabs/BasicTabs.tsx
new file mode 100644
index 0000000..d679e24
--- /dev/null
+++ b/components/kit/components/elements/tabs/BasicTabs.tsx
@@ -0,0 +1,26 @@
+export default function BasicTabs() {
+    return (
+        <ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 ">
+            <li className="mr-2">
+                <a href="#" className="inline-block p-4 text-gray-800 bg-white rounded-t-lg active ">
+                    Home
+                </a>
+            </li>
+            <li className="mr-2">
+                <a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
+                    Calendar
+                </a>
+            </li>
+            <li className="mr-2">
+                <a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
+                    Results
+                </a>
+            </li>
+            <li className="mr-2">
+                <a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
+                    Live
+                </a>
+            </li>
+        </ul>
+    );
+}
diff --git a/components/kit/components/elements/tabs/BasicTabsDisabled.tsx b/components/kit/components/elements/tabs/BasicTabsDisabled.tsx
new file mode 100644
index 0000000..0b1f2de
--- /dev/null
+++ b/components/kit/components/elements/tabs/BasicTabsDisabled.tsx
@@ -0,0 +1,31 @@
+export default function BasicTabsDisabled() {
+    return (
+        <ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 ">
+            <li className="mr-2">
+                <a href="#" className="inline-block p-4 text-gray-800 bg-white rounded-t-lg active ">
+                    Home
+                </a>
+            </li>
+            <li className="mr-2">
+                <a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
+                    Calendar
+                </a>
+            </li>
+            <li className="mr-2">
+                <a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
+                    Results
+                </a>
+            </li>
+            <li className="mr-2">
+                <a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
+                    Live
+                </a>
+            </li>
+            <li>
+                <a className="inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500">
+                    Disabled
+                </a>
+            </li>
+        </ul>
+    );
+}
diff --git a/components/kit/components/elements/tabs/BasicTabsUnderline.tsx b/components/kit/components/elements/tabs/BasicTabsUnderline.tsx
new file mode 100644
index 0000000..983936d
--- /dev/null
+++ b/components/kit/components/elements/tabs/BasicTabsUnderline.tsx
@@ -0,0 +1,41 @@
+export default function BasicTabsUnderline() {
+    return (
+        <div className="text-sm font-medium text-center text-gray-500 border-b border-gray-200 ">
+            <ul className="flex flex-wrap -mb-px">
+                <li className="mr-2">
+                    <a
+                        href="#"
+                        className="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 "
+                    >
+                        Home
+                    </a>
+                </li>
+                <li className="mr-2">
+                    <a
+                        href="#"
+                        className="inline-block p-4 text-purple-600 border-b-2 border-purple-600 rounded-t-lg active "
+                        aria-current="page"
+                    >
+                        Calendar
+                    </a>
+                </li>
+                <li className="mr-2">
+                    <a
+                        href="#"
+                        className="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 "
+                    >
+                        Results
+                    </a>
+                </li>
+                <li className="mr-2">
+                    <a
+                        href="#"
+                        className="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 "
+                    >
+                        Live
+                    </a>
+                </li>
+            </ul>
+        </div>
+    );
+}
diff --git a/pages/components/tabs/index.tsx b/pages/components/tabs/index.tsx
new file mode 100644
index 0000000..369bc11
--- /dev/null
+++ b/pages/components/tabs/index.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import AppLayout from '../../../components/layout/AppLayout';
+import ComponentLayout from '../../../components/layout/ComponentLayout';
+import SectionHeader from '../../../components/site/header/SectionHeader';
+import BasicTabs from '../../../components/kit/components/elements/tabs/BasicTabs';
+import BasicTabsDisabled from '../../../components/kit/components/elements/tabs/BasicTabsDisabled';
+import BasicTabsUnderline from '../../../components/kit/components/elements/tabs/BasicTabsUnderline';
+const ComponentsPage: FC = () => {
+    return (
+        <AppLayout
+            title="Tabs free Tailwind components"
+            desc="Tabs, banner, placeolder and more components for tailwind css"
+        >
+            <SectionHeader title="Tabs" />
+            <ComponentLayout title="Simple Tabs" element={<BasicTabs />} component={BasicTabs} />
+            <ComponentLayout
+                title="Simple Tabs disabled"
+                element={<BasicTabsDisabled />}
+                component={BasicTabsDisabled}
+            />
+            <ComponentLayout
+                title="Simple Tabs underline"
+                element={<BasicTabsUnderline />}
+                component={BasicTabsUnderline}
+            />
+        </AppLayout>
+    );
+};
+
+export default ComponentsPage;
diff --git a/public/.DS_Store b/public/.DS_Store
index 9a2df08..0167d93 100644
Binary files a/public/.DS_Store and b/public/.DS_Store differ
diff --git a/public/images/.DS_Store b/public/images/.DS_Store
index 355f07d..9432e7f 100644
Binary files a/public/images/.DS_Store and b/public/images/.DS_Store differ
diff --git a/public/images/sections/.DS_Store b/public/images/sections/.DS_Store
index e796631..50f1ccd 100644
Binary files a/public/images/sections/.DS_Store and b/public/images/sections/.DS_Store differ
diff --git a/public/images/sections/skeleton.png b/public/images/sections/skeleton.png
index 50142bc..22eafa6 100644
Binary files a/public/images/sections/skeleton.png and b/public/images/sections/skeleton.png differ
diff --git a/public/images/sections/tabs.png b/public/images/sections/tabs.png
new file mode 100644
index 0000000..eba2855
Binary files /dev/null and b/public/images/sections/tabs.png differ