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. Tabs also allow users to switch between different views or sections of content within the same window or space.
They can be horizontal or vertical, depending on the design requirements. The visual design of tabs usually includes a clear indication of which tab is currently active, often through color, highlighting, or underlining.
See below our component examples that will help you create simple and easy-to-use tabs for your Tailwind CSS project.
This example showcases a tabs component implemented with HTML, styled using Tailwind CSS, and designed to be flexible and responsive, fitting well within a full-width (w-full) container.
<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> This example showcases a more detailed tab component design that incorporates icons within each tab for a richer visual experience. The use of SVG icons alongside text labels provides a clear, intuitive way for users to navigate the tabs.
<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> This example showcases a tabs component, including both the tabs themselves and the content sections that are associated with each tab. 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>