Get started on your web project with our responsive Tailwind CSS tabs that create a secondary navigational hierarchy for your website.
Tabs are components that render and display subsections to users. They arrange the content into categories for easy access and a cleaner-looking app.
See below our example that will help you create a simple and easy-to-use tabs for your Tailwind CSS and project.
<div class="w-full">
<div class="relative right-0">
<ul class="relative flex flex-wrap p-1 list-none rounded-lg bg-blue-gray-50/60" data-tabs="tabs" role="list">
<li class="z-30 flex-auto text-center">
<a class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target="" active role="tab" aria-selected="true">
<span class="ml-1">HTML</span>
</a>
</li>
<li class="z-30 flex-auto text-center">
<a class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target="" role="tab" aria-selected="false">
<span class="ml-1">React</span>
</a>
</li>
<li class="z-30 flex-auto text-center">
<a class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target="" role="tab" aria-selected="false">
<span class="ml-1">Vue</span>
</a>
</li>
<li class="z-30 flex-auto text-center">
<a class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target="" role="tab" aria-selected="true">
<span class="ml-1">Angular</span>
</a>
</li>
<li class="z-30 flex-auto text-center">
<a class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target="" role="tab" aria-selected="true">
<span class="ml-1">Svelte</span>
</a>
</li>
</ul>
</div>
</div> The tabs component comes with different variants including icons.
<div class="w-2/3">
<div class="relative right-0">
<ul class="relative flex flex-wrap p-1 list-none rounded-xl bg-blue-gray-50/60" data-tabs="tabs" role="list">
<li class="z-30 flex-auto text-center">
<a class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target="" active role="tab" aria-selected="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-5 h-5">
<path
d="M11.644 1.59a.75.75 0 01.712 0l9.75 5.25a.75.75 0 010 1.32l-9.75 5.25a.75.75 0 01-.712 0l-9.75-5.25a.75.75 0 010-1.32l9.75-5.25z">
</path>
<path
d="M3.265 10.602l7.668 4.129a2.25 2.25 0 002.134 0l7.668-4.13 1.37.739a.75.75 0 010 1.32l-9.75 5.25a.75.75 0 01-.71 0l-9.75-5.25a.75.75 0 010-1.32l1.37-.738z">
</path>
<path
d="M10.933 19.231l-7.668-4.13-1.37.739a.75.75 0 000 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 000-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 01-2.134-.001z">
</path>
</svg>
<span class="ml-1">Dashboard</span>
</a>
</li>
<li class="z-30 flex-auto text-center">
<a class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target="" role="tab" aria-selected="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-5 h-5">
<path fill-rule="evenodd"
d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
clip-rule="evenodd"></path>
</svg>
<span class="ml-1">Profile</span>
</a>
</li>
<li class="z-30 flex-auto text-center">
<a class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target="" role="tab" aria-selected="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-5 h-5">
<path fill-rule="evenodd"
d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
clip-rule="evenodd"></path>
</svg>
<span class="ml-1">Settings</span>
</a>
</li>
</ul>
</div>
</div> You can reference a specific content for each tab option, using the data-tab-content data attribute.
<div class="w-2/3">
<div class="relative right-0">
<ul
class="relative flex flex-wrap p-1 list-none rounded-xl bg-blue-gray-50/60"
data-tabs="tabs"
role="list"
>
<li class="z-30 flex-auto text-center">
<a
class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target=""
active=""
role="tab"
aria-selected="true"
aria-controls="app"
>
<span class="ml-1">App</span>
</a>
</li>
<li class="z-30 flex-auto text-center">
<a
class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target=""
role="tab"
aria-selected="false"
aria-controls="message"
>
<span class="ml-1">Messages</span>
</a>
</li>
<li class="z-30 flex-auto text-center">
<a
class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
data-tab-target=""
role="tab"
aria-selected="false"
aria-controls="settings"
>
<span class="ml-1">Settings</span>
</a>
</li>
</ul>
<div data-tab-content="" class="p-5">
<div class="block opacity-100" id="app" role="tabpanel">
<p class="block font-sans text-base antialiased font-light leading-relaxed text-inherit text-blue-gray-500">
Because it's about motivating the doers. Because I'm here to follow
my dreams and inspire other people to follow their dreams, too.
</p>
</div>
<div class="hidden opacity-0" id="message" role="tabpanel">
<p class="block font-sans text-base antialiased font-light leading-relaxed text-inherit text-blue-gray-500">
The reading of all good books is like a conversation with the finest
minds of past centuries.
</p>
</div>
<div class="hidden opacity-0" id="settings" role="tabpanel">
<p class="block font-sans text-base antialiased font-light leading-relaxed text-inherit text-blue-gray-500">
Comparing yourself to others is the thief of joy.
</p>
</div>
</div>
</div>
</div>The following data attributes are available for tabs.
| Attribute | Description |
|---|---|
data-tabs | Set the main container for the tabs. |
data-tab-target | Set the tab tigger element that when a click happened on it, it's content should be visible. |
data-tab-content | Set tab content element. |
active | Set default active tab, it should be used for the trigger element where the data-tab-target is used. |
The tabs component needs a required script files to work, you just need to add the below script file to the bottom of your html file.
<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/tabs.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/tabs.js"></script>