Components
Tabs make it easy to switch between different views.
Note that this component requires the use of our Tabs plugin, else you can skip this message if you are already using Preline UI as a package.
Use the tab JavaScript plugin - to extend our navigational tabs and pills to create tabbable panes of local content.
Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
A basic form of tabs with underline.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 active" id="tabs-with-underline-item-1" data-hs-tab="#tabs-with-underline-1" aria-controls="tabs-with-underline-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="tabs-with-underline-item-2" data-hs-tab="#tabs-with-underline-2" aria-controls="tabs-with-underline-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="tabs-with-underline-item-3" data-hs-tab="#tabs-with-underline-3" aria-controls="tabs-with-underline-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="mt-3">
<div id="tabs-with-underline-1" role="tabpanel" aria-labelledby="tabs-with-underline-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="tabs-with-underline-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="tabs-with-underline-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-underline-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Contained tabs with icons.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 active" id="tabs-with-icons-item-1" data-hs-tab="#tabs-with-icons-1" aria-controls="tabs-with-icons-1" role="tab">
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Tab 1
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="tabs-with-icons-item-2" data-hs-tab="#tabs-with-icons-2" aria-controls="tabs-with-icons-2" role="tab">
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
Tab 2
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="tabs-with-icons-item-3" data-hs-tab="#tabs-with-icons-3" aria-controls="tabs-with-icons-3" role="tab">
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
Tab 3
</button>
</nav>
</div>
<div class="mt-3">
<div id="tabs-with-icons-1" role="tabpanel" aria-labelledby="tabs-with-icons-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="tabs-with-icons-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-icons-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="tabs-with-icons-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-icons-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Contained tabs with badges.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 active" id="tabs-with-badges-item-1" data-hs-tab="#tabs-with-badges-1" aria-controls="tabs-with-badges-1" role="tab">
Tab 1 <span class="hs-tab-active:bg-blue-100 hs-tab-active:text-blue-600 dark:hs-tab-active:bg-blue-800 dark:hs-tab-active:text-white ms-1 py-0.5 px-1.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">99+</span>
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="tabs-with-badges-item-2" data-hs-tab="#tabs-with-badges-2" aria-controls="tabs-with-badges-2" role="tab">
Tab 2 <span class="hs-tab-active:bg-blue-100 hs-tab-active:text-blue-600 dark:hs-tab-active:bg-blue-800 dark:hs-tab-active:text-white ms-1 py-0.5 px-1.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">99+</span>
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="tabs-with-badges-item-3" data-hs-tab="#tabs-with-badges-3" aria-controls="tabs-with-badges-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="mt-3">
<div id="tabs-with-badges-1" role="tabpanel" aria-labelledby="tabs-with-badges-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="tabs-with-badges-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-badges-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="tabs-with-badges-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-badges-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Centered with .justify-center:
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="-mb-0.5 flex justify-center space-x-6" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 active" id="horizontal-alignment-item-1" data-hs-tab="#horizontal-alignment-1" aria-controls="horizontal-alignment-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="horizontal-alignment-item-2" data-hs-tab="#horizontal-alignment-2" aria-controls="horizontal-alignment-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="horizontal-alignment-item-3" data-hs-tab="#horizontal-alignment-3" aria-controls="horizontal-alignment-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="mt-3">
<div id="horizontal-alignment-1" role="tabpanel" aria-labelledby="horizontal-alignment-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="horizontal-alignment-2" class="hidden" role="tabpanel" aria-labelledby="horizontal-alignment-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="horizontal-alignment-3" class="hidden" role="tabpanel" aria-labelledby="horizontal-alignment-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Right-aligned with .justify-end:
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="-mb-0.5 flex justify-end space-x-6" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 active" id="horizontal-right-alignment-item-1" data-hs-tab="#horizontal-right-alignment-1" aria-controls="horizontal-right-alignment-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="horizontal-right-alignment-item-2" data-hs-tab="#horizontal-right-alignment-2" aria-controls="horizontal-right-alignment-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="horizontal-right-alignment-item-3" data-hs-tab="#horizontal-right-alignment-3" aria-controls="horizontal-right-alignment-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="mt-3">
<div id="horizontal-right-alignment-1" role="tabpanel" aria-labelledby="horizontal-right-alignment-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="horizontal-right-alignment-2" class="hidden" role="tabpanel" aria-labelledby="horizontal-right-alignment-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="horizontal-right-alignment-3" class="hidden" role="tabpanel" aria-labelledby="horizontal-right-alignment-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Vertically stacked navigation.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<div class="flex flex-wrap">
<div class="border-e border-gray-200 dark:border-gray-700">
<nav class="flex flex-col space-y-2" aria-label="Tabs" role="tablist" data-hs-tabs-vertical="true">
<button type="button" class="hs-tab-active:border-blue-500 hs-tab-active:text-blue-600 dark:hs-tab-active:text-blue-600 py-1 pe-4 inline-flex items-center gap-x-2 border-e-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 active" id="vertical-tab-with-border-item-1" data-hs-tab="#vertical-tab-with-border-1" aria-controls="vertical-tab-with-border-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:border-blue-500 hs-tab-active:text-blue-600 dark:hs-tab-active:text-blue-600 py-1 pe-4 inline-flex items-center gap-x-2 border-e-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="vertical-tab-with-border-item-2" data-hs-tab="#vertical-tab-with-border-2" aria-controls="vertical-tab-with-border-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:border-blue-500 hs-tab-active:text-blue-600 dark:hs-tab-active:text-blue-600 py-1 pe-4 inline-flex items-center gap-x-2 border-e-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="vertical-tab-with-border-item-3" data-hs-tab="#vertical-tab-with-border-3" aria-controls="vertical-tab-with-border-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="ms-3">
<div id="vertical-tab-with-border-1" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="vertical-tab-with-border-2" class="hidden" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="vertical-tab-with-border-3" class="hidden" role="tabpanel" aria-labelledby="vertical-tab-with-border-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
</div>
Another type of Tabs.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -mb-px py-3 px-4 inline-flex items-center gap-x-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="card-type-tab-item-1" data-hs-tab="#card-type-tab-1" aria-controls="card-type-tab-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -mb-px py-3 px-4 inline-flex items-center gap-x-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="card-type-tab-item-2" data-hs-tab="#card-type-tab-2" aria-controls="card-type-tab-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -mb-px py-3 px-4 inline-flex items-center gap-x-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="card-type-tab-item-3" data-hs-tab="#card-type-tab-3" aria-controls="card-type-tab-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="mt-3">
<div id="card-type-tab-1" role="tabpanel" aria-labelledby="card-type-tab-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="card-type-tab-2" class="hidden" role="tabpanel" aria-labelledby="card-type-tab-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="card-type-tab-3" class="hidden" role="tabpanel" aria-labelledby="card-type-tab-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Where long content doesn't fit on the screen, horizontal scrollbar keeps the tab bar inline.
Resize the example to see it in action.
<nav class="pb-1 flex space-x-1 overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-slate-700 dark:[&::-webkit-scrollbar-thumb]:bg-slate-500" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 active" id="horizontal-scroll-tab-item-1" data-hs-tab="#horizontal-scroll-tab-1" aria-controls="horizontal-scroll-tab-1" role="tab">
Long tab link 1
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="horizontal-scroll-tab-item-2" data-hs-tab="#horizontal-scroll-tab-2" aria-controls="horizontal-scroll-tab-2" role="tab">
Long tab link 2
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="horizontal-scroll-tab-item-3" data-hs-tab="#horizontal-scroll-tab-3" aria-controls="horizontal-scroll-tab-3" role="tab">
Long tab link 3
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="horizontal-scroll-tab-item-4" data-hs-tab="#horizontal-scroll-tab-4" aria-controls="horizontal-scroll-tab-4" role="tab">
Long tab link 4
</button>
<button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500" id="horizontal-scroll-tab-item-5" data-hs-tab="#horizontal-scroll-tab-5" aria-controls="horizontal-scroll-tab-5" role="tab">
Long tab link 5
</button>
</nav>
<div class="mt-3">
<div id="horizontal-scroll-tab-1" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="horizontal-scroll-tab-2" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="horizontal-scroll-tab-3" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
<div id="horizontal-scroll-tab-4" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-4">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">fourth</em> item's tab body.
</p>
</div>
<div id="horizontal-scroll-tab-5" class="hidden" role="tabpanel" aria-labelledby="horizontal-scroll-tab-item-5">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">fifth</em> item's tab body.
</p>
</div>
</div>
Where long content doesn't fit on the screen, change the tab bar to <select> on mobile.
Resize the example to see it in action.
<select id="tab-select" class="sm:hidden py-3 px-4 pe-9 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" aria-label="Tabs" role="tablist">
<option value="#hs-tab-to-select-1">Tab 1</option>
<option value="#hs-tab-to-select-2">Tab 2</option>
<option value="#hs-tab-to-select-3">Tab 3</option>
</select>
<div class="hidden sm:block border-b border-gray-200 dark:border-gray-700">
<nav class="flex space-x-2" aria-label="Tabs" role="tablist" hs-data-tab-select="#tab-select">
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -mb-px py-3 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="hs-tab-to-select-item-1" data-hs-tab="#hs-tab-to-select-1" aria-controls="hs-tab-to-select-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -mb-px py-3 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="hs-tab-to-select-item-2" data-hs-tab="#hs-tab-to-select-2" aria-controls="hs-tab-to-select-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:border-b-transparent hs-tab-active:text-blue-600 dark:hs-tab-active:bg-gray-800 dark:hs-tab-active:border-b-gray-800 dark:hs-tab-active:text-white -mb-px py-3 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-t-lg hover:text-gray-700 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="hs-tab-to-select-item-3" data-hs-tab="#hs-tab-to-select-3" aria-controls="hs-tab-to-select-3" role="tab">
Tab 3
</button>
</nav>
</div>
<div class="mt-3">
<div id="hs-tab-to-select-1" role="tabpanel" aria-labelledby="hs-tab-to-select-item-1">
<div class="p-3 sm:p-0">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800">first</em> item's tab body.
</p>
</div>
</div>
<div id="hs-tab-to-select-2" class="hidden" role="tabpanel" aria-labelledby="hs-tab-to-select-item-2">
<div class="p-3 sm:p-0">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800">second</em> item's tab body.
</p>
</div>
</div>
<div id="hs-tab-to-select-3" class="hidden" role="tabpanel" aria-labelledby="hs-tab-to-select-item-3">
<div class="p-3 sm:p-0">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800">third</em> item's tab body.
</p>
</div>
</div>
</div>
Another type of Tabs with segment.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<div class="flex">
<div class="flex bg-gray-100 hover:bg-gray-200 rounded-lg transition p-1 dark:bg-gray-700 dark:hover:bg-gray-600">
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:bg-white hs-tab-active:text-gray-700 hs-tab-active:dark:bg-gray-800 hs-tab-active:dark:text-gray-400 dark:hs-tab-active:bg-gray-800 py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm text-gray-500 hover:text-gray-700 font-medium rounded-lg hover:hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-white active" id="segment-item-1" data-hs-tab="#segment-1" aria-controls="segment-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:text-gray-700 hs-tab-active:dark:bg-gray-800 hs-tab-active:dark:text-gray-400 dark:hs-tab-active:bg-gray-800 py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm text-gray-500 hover:text-gray-700 font-medium rounded-lg hover:hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-white dark:hover:text-gray-300" id="segment-item-2" data-hs-tab="#segment-2" aria-controls="segment-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:bg-white hs-tab-active:text-gray-700 hs-tab-active:dark:bg-gray-800 hs-tab-active:dark:text-gray-400 dark:hs-tab-active:bg-gray-800 py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm text-gray-500 hover:text-gray-700 font-medium rounded-lg hover:hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-white dark:hover:text-gray-300" id="segment-item-3" data-hs-tab="#segment-3" aria-controls="segment-3" role="tab">
Tab 3
</button>
</nav>
</div>
</div>
<div class="mt-3">
<div id="segment-1" role="tabpanel" aria-labelledby="segment-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="segment-2" class="hidden" role="tabpanel" aria-labelledby="segment-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="segment-3" class="hidden" role="tabpanel" aria-labelledby="segment-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Another type of Tabs with underlined bar.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<nav class="relative z-0 flex border rounded-xl overflow-hidden dark:border-gray-700" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:border-b-blue-600 hs-tab-active:text-gray-900 dark:hs-tab-active:text-white dark:hs-tab-active:border-b-blue-600 relative min-w-0 flex-1 bg-white first:border-s-0 border-s border-b-2 py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-400 active" id="bar-with-underline-item-1" data-hs-tab="#bar-with-underline-1" aria-controls="bar-with-underline-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:border-b-blue-600 hs-tab-active:text-gray-900 dark:hs-tab-active:text-white dark:hs-tab-active:border-b-blue-600 relative min-w-0 flex-1 bg-white first:border-s-0 border-s border-b-2 py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-400" id="bar-with-underline-item-2" data-hs-tab="#bar-with-underline-2" aria-controls="bar-with-underline-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:border-b-blue-600 hs-tab-active:text-gray-900 dark:hs-tab-active:text-white dark:hs-tab-active:border-b-blue-600 relative min-w-0 flex-1 bg-white first:border-s-0 border-s border-b-2 py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 focus:outline-none focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-400" id="bar-with-underline-item-3" data-hs-tab="#bar-with-underline-3" aria-controls="bar-with-underline-3" role="tab">
Tab 3
</button>
</nav>
<div class="mt-3">
<div id="bar-with-underline-1" role="tabpanel" aria-labelledby="bar-with-underline-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="bar-with-underline-2" class="hidden" role="tabpanel" aria-labelledby="bar-with-underline-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="bar-with-underline-3" class="hidden" role="tabpanel" aria-labelledby="bar-with-underline-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Another type of Tabs with pills on gray color.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:bg-gray-200 hs-tab-active:text-gray-800 hs-tab-active:hover:text-gray-800 dark:hs-tab-active:bg-gray-700 dark:hs-tab-active:text-white py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="pills-on-gray-color-item-1" data-hs-tab="#pills-on-gray-color-1" aria-controls="pills-on-gray-color-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:bg-gray-200 hs-tab-active:text-gray-800 hs-tab-active:hover:text-gray-800 dark:hs-tab-active:bg-gray-700 dark:hs-tab-active:text-white py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 dark:hover:text-gray-300" id="pills-on-gray-color-item-2" data-hs-tab="#pills-on-gray-color-2" aria-controls="pills-on-gray-color-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:bg-gray-200 hs-tab-active:text-gray-800 hs-tab-active:hover:text-gray-800 dark:hs-tab-active:bg-gray-700 dark:hs-tab-active:text-white py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 dark:hover:text-gray-300" id="pills-on-gray-color-item-3" data-hs-tab="#pills-on-gray-color-3" aria-controls="pills-on-gray-color-3" role="tab">
Tab 3
</button>
</nav>
<div class="mt-3">
<div id="pills-on-gray-color-1" role="tabpanel" aria-labelledby="pills-on-gray-color-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="pills-on-gray-color-2" class="hidden" role="tabpanel" aria-labelledby="pills-on-gray-color-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="pills-on-gray-color-3" class="hidden" role="tabpanel" aria-labelledby="pills-on-gray-color-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Another type of Tabs with pills.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:bg-blue-600 hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 hover:text-blue-600 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="pills-with-brand-color-item-1" data-hs-tab="#pills-with-brand-color-1" aria-controls="pills-with-brand-color-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:bg-blue-600 hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 hover:text-blue-600 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="pills-with-brand-color-item-2" data-hs-tab="#pills-with-brand-color-2" aria-controls="pills-with-brand-color-2" role="tab">
Tab 2
</button>
<button type="button" class="hs-tab-active:bg-blue-600 hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-3 px-4 inline-flex items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 hover:text-blue-600 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="pills-with-brand-color-item-3" data-hs-tab="#pills-with-brand-color-3" aria-controls="pills-with-brand-color-3" role="tab">
Tab 3
</button>
</nav>
<div class="mt-3">
<div id="pills-with-brand-color-1" role="tabpanel" aria-labelledby="pills-with-brand-color-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="pills-with-brand-color-2" class="hidden" role="tabpanel" aria-labelledby="pills-with-brand-color-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="pills-with-brand-color-3" class="hidden" role="tabpanel" aria-labelledby="pills-with-brand-color-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
Force your nav's contents to extend the full available width one of two modifier classes. Notice that all horizontal space is occupied, but not every nav item has the same width.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:bg-blue-600 hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-3 px-4 text-center flex-auto inline-flex justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 hover:text-blue-600 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="fill-and-justify-item-1" data-hs-tab="#fill-and-justify-1" aria-controls="fill-and-justify-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:bg-blue-600 hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-3 px-4 text-center flex-auto inline-flex justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 hover:text-blue-600 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="fill-and-justify-item-2" data-hs-tab="#fill-and-justify-2" aria-controls="fill-and-justify-2" role="tab">
This is the longest link I've seen
</button>
<button type="button" class="hs-tab-active:bg-blue-600 hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-3 px-4 text-center flex-auto inline-flex justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 hover:text-blue-600 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="fill-and-justify-item-3" data-hs-tab="#fill-and-justify-3" aria-controls="fill-and-justify-3" role="tab">
Tab 3
</button>
</nav>
<div class="mt-3">
<div id="fill-and-justify-1" role="tabpanel" aria-labelledby="fill-and-justify-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="fill-and-justify-2" class="hidden" role="tabpanel" aria-labelledby="fill-and-justify-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="fill-and-justify-3" class="hidden" role="tabpanel" aria-labelledby="fill-and-justify-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>
All horizontal space will be occupied by nav links, but unlike the example above, every nav item will be the same width.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
<button type="button" class="hs-tab-active:bg-blue-600 hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-3 px-4 text-center basis-0 grow inline-flex justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 hover:text-blue-600 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="equal-width-elements-item-1" data-hs-tab="#equal-width-elements-1" aria-controls="equal-width-elements-1" role="tab">
Tab 1
</button>
<button type="button" class="hs-tab-active:bg-blue-600 hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-3 px-4 text-center basis-0 grow inline-flex justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 hover:text-blue-600 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="equal-width-elements-item-2" data-hs-tab="#equal-width-elements-2" aria-controls="equal-width-elements-2" role="tab">
This is the longest link I've seen
</button>
<button type="button" class="hs-tab-active:bg-blue-600 hs-tab-active:text-white hs-tab-active:hover:text-white hs-tab-active:dark:text-white py-3 px-4 text-center basis-0 grow inline-flex justify-center items-center gap-x-2 bg-transparent text-sm font-medium text-center text-gray-500 hover:text-blue-600 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="equal-width-elements-item-3" data-hs-tab="#equal-width-elements-3" aria-controls="equal-width-elements-3" role="tab">
Tab 3
</button>
</nav>
<div class="mt-3">
<div id="equal-width-elements-1" role="tabpanel" aria-labelledby="equal-width-elements-item-1">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
</p>
</div>
<div id="equal-width-elements-2" class="hidden" role="tabpanel" aria-labelledby="equal-width-elements-item-2">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
</p>
</div>
<div id="equal-width-elements-3" class="hidden" role="tabpanel" aria-labelledby="equal-width-elements-item-3">
<p class="text-gray-500 dark:text-gray-400">
This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
</p>
</div>
</div>