Component

Tailwind CSS Tabs

Tabs can also be called secondary navigational tools and using which one can also toggle information inside the container. Tabs offer dozens of predefined classes.

Tailwind tabs are a versatile and customizable way to organize and navigate content within a web application or website. With Tailwind CSS, you can easily create tabbed interfaces using a combination of HTML structure and utility classes, allowing you to style tabs and their associated content to match your design requirements.

Requires Pagedone JS

This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.

After placing the main navbar through tabs in tailwind css one can easily segregate information flow using tabs.

To create tabs like separate content into different panes where each pane is viewable one at a time.

  • Add tablink class to an anchor tag (ie. <a>)
  • Add tabcontent class into different panes where each pane is viewable one at a time

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Tabs with underline

When multiple tabs are available and active tab needs to be differentiated by adding underline. then following tailwind tabs example can be used.

This is the first item's tab body. 

 <div class="tabs">
<div class="block">
<ul class="flex border-b border-gray-200 space-x-3 transition-all duration-300 -mb-px">
 <li>
   <a href="javascript:void(0)" class="inline-block py-4 px-6 text-gray-500 hover:text-gray-800 font-medium border-b-2 border-transparent tab-active:border-b-indigo-600 tab-active:text-indigo-600 active tablink whitespace-nowrap" data-tab="tabs-with-underline-1" role="tab"> Tab 1 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-4 px-6 text-gray-500 hover:text-gray-800 font-medium border-b-2 border-transparent tab-active:border-b-indigo-600 tab-active:text-indigo-600 tablink whitespace-nowrap" data-tab="tabs-with-underline-2" role="tab"> Tab 2 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-4 px-6 text-gray-500 hover:text-gray-800 font-medium border-b-2 border-transparent tab-active:border-b-indigo-600 tab-active:text-indigo-600 tablink whitespace-nowrap" data-tab="tabs-with-underline-3" role="tab"> Tab 3 </a>
 </li>
</ul>
</div>
<div class="mt-3">
<div id="tabs-with-underline-1" role="tabpanel" aria-labelledby="tabs-with-underline-item-1" class="tabcontent">
 <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 tabcontent" 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 tabcontent" 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>
</div>

Tabs with box style

This tailwind ui tabs can be shown under different boxes and can be made them look separated.

This is the first item's tab body. 

  <div class="tabs">
<div class="flex ">
<ul class="flex border border-gray-200 rounded-xl transition-all duration-300 -mb-px overflow-hidden">
  <li>
    <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium border-r border-gray-200 tab-active:bg-indigo-50 tab-active:text-indigo-600 active tablink whitespace-nowrap" data-tab="tabs-with-box-1" role="tab"> Tab 1 </a>
  </li>
  <li>
    <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium border-r border-gray-200 tab-active:bg-indigo-50 tab-active:text-indigo-600 tablink whitespace-nowrap" data-tab="tabs-with-box-2" role="tab"> Tab 2 </a>
  </li>
  <li>
    <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-50 tab-active:text-indigo-600 tablink whitespace-nowrap" data-tab="tabs-with-box-3" role="tab"> Tab 3 </a>
  </li>
</ul>
</div>
<div class="mt-3">
<div id="tabs-with-box-1" role="tabpanel" aria-labelledby="tabs-with-box-item-1" class="tabcontent">
  <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">first</em> item's tab body. </p>
</div>
<div id="tabs-with-box-2" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-box-item-2">
  <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">second</em> item's tab body. </p>
</div>
<div id="tabs-with-box-3" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-box-item-3">
  <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">third</em> item's tab body. </p>
</div>
</div>
</div>

Tabs with background style

By changing background color of the tab on either hover or click event tabs can be shown as illustrated in the following example.

This is the first item's tab body. 

<div class="tabs">
<div class="flex ">
<ul class="flex bg-gray-100 rounded-2xl transition-all duration-300 p-2 overflow-hidden">
<li>
  <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-white tab-active:rounded-xl tab-active:text-indigo-600 active tablink whitespace-nowrap" data-tab="tabs-with-background-1" role="tab"> Tab 1 </a>
</li>
<li>
  <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-white tab-active:rounded-xl tab-active:text-indigo-600 tablink whitespace-nowrap" data-tab="tabs-with-background-2" role="tab"> Tab 2 </a>
</li>
<li>
  <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-white tab-active:rounded-xl tab-active:text-indigo-600 tablink whitespace-nowrap" data-tab="tabs-with-background-3" role="tab"> Tab 3 </a>
</li>
</ul>
</div>
<div class="mt-3">
<div id="tabs-with-background-1" role="tabpanel" aria-labelledby="tabs-with-background-item-1" class="tabcontent">
<p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">first</em> item's tab body. </p>
</div>
<div id="tabs-with-background-2" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-background-item-2">
<p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">second</em> item's tab body. </p>
</div>
<div id="tabs-with-background-3" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-background-item-3">
<p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">third</em> item's tab body. </p>
</div>
</div>
</div>

Tabs with pill style

Following tailwind tabs component helps you make pill styled tab components.

This is the first item's tab body. 

 <div class="tabs">
<div class="flex">
<ul class="flex flex-wrap transition-all duration-300 overflow-hidden">
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-600 tab-active:text-white tab-active:rounded-full active tablink" data-tab="tabs-with-pill-1" role="tab"> Tab 1 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-600 tab-active:text-white tab-active:rounded-full tablink" data-tab="tabs-with-pill-2" role="tab"> Tab 2 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-600 tab-active:text-white tab-active:rounded-full tablink" data-tab="tabs-with-pill-3" role="tab"> Tab 3 </a>
 </li>
</ul>
</div>
<div class="mt-3">
<div id="tabs-with-pill-1" role="tabpanel" aria-labelledby="tabs-with-pill-item-1" class="tabcontent">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">first</em> item's tab body. </p>
</div>
<div id="tabs-with-pill-2" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-pill-item-2">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">second</em> item's tab body. </p>
</div>
<div id="tabs-with-pill-3" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-pill-item-3">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">third</em> item's tab body. </p>
</div>
</div>
</div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Tabs with rounded style

Following example helps you make rounded radius styled tab components.

This is the first item's tab body. 

 <div class="tabs">
<div class="flex ">
<ul class="flex flex-wrap transition-all duration-300 overflow-hidden">
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-600 tab-active:text-white tab-active:rounded-xl active tablink" data-tab="tabs-with-rounded-1" role="tab"> Tab 1 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-600 tab-active:text-white tab-active:rounded-xl tablink" data-tab="tabs-with-rounded-2" role="tab"> Tab 2 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-600 tab-active:text-white tab-active:rounded-xl tablink" data-tab="tabs-with-rounded-3" role="tab"> Tab 3 </a>
 </li>
</ul>
</div>
<div class="mt-3">
<div id="tabs-with-rounded-1" role="tabpanel" aria-labelledby="tabs-with-rounded-item-1" class="tabcontent">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">first</em> item's tab body. </p>
</div>
<div id="tabs-with-rounded-2" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-rounded-item-2">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">second</em> item's tab body. </p>
</div>
<div id="tabs-with-rounded-3" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-rounded-item-3">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">third</em> item's tab body. </p>
</div>
</div>
</div>

Tabs with card style

Behind every tab card style background in different color can be placed whenever any tab is clicked or hovered upon it will change the color of the background of the tabs in tailwind css.

This is the first item's tab body. 

 <div class="tabs">
<div class="flex ">
<ul class="flex flex-wrap transition-all duration-300 overflow-hidden">
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-600 tab-active:text-white tab-active:rounded-t-2xl active tablink" data-tab="tabs-with-card-1" role="tab"> Tab 1 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-600 tab-active:text-white tab-active:rounded-t-2xl tablink" data-tab="tabs-with-card-2" role="tab"> Tab 2 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-600 tab-active:text-white tab-active:rounded-t-2xl tablink" data-tab="tabs-with-card-3" role="tab"> Tab 3 </a>
 </li>
</ul>
</div>
<div class="mt-3">
<div id="tabs-with-card-1" role="tabpanel" aria-labelledby="tabs-with-card-item-1" class="tabcontent">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">first</em> item's tab body. </p>
</div>
<div id="tabs-with-card-2" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-card-item-2">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">second</em> item's tab body. </p>
</div>
<div id="tabs-with-card-3" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-card-item-3">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">third</em> item's tab body. </p>
</div>
</div>
</div>

Tabs with pill light style

Here, in the background you can show the shape of the pill with light color to make the tab look different.

This is the first item's tab body. 

 <div class="tabs">
<div class="flex ">
<ul class="flex flex-wrap transition-all duration-300 overflow-hidden">
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-50 tab-active:text-indigo-600 tab-active:rounded-full active tablink" data-tab="tabs-with-pill-light-1" role="tab"> Tab 1 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-50 tab-active:text-indigo-600 tab-active:rounded-full tablink" data-tab="tabs-with-pill-light-2" role="tab"> Tab 2 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-50 tab-active:text-indigo-600 tab-active:rounded-full tablink" data-tab="tabs-with-pill-light-3" role="tab"> Tab 3 </a>
 </li>
</ul>
</div>
<div class="mt-3">
<div id="tabs-with-pill-light-1" role="tabpanel" aria-labelledby="tabs-with-pill-light-item-1" class="tabcontent">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">first</em> item's tab body. </p>
</div>
<div id="tabs-with-pill-light-2" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-pill-light-item-2">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">second</em> item's tab body. </p>
</div>
<div id="tabs-with-pill-light-3" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-pill-light-item-3">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">third</em> item's tab body. </p>
</div>
</div>
</div>

Tabs with rounded light style

In the background of Tailwind Tabs a button-like shape can be placed which can be made visible on hover or on click action.

This is the first item's tab body. 

 <div class="tabs">
<div class="flex ">
<ul class="flex flex-wrap transition-all duration-300 overflow-hidden">
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-50 tab-active:text-indigo-600 tab-active:rounded-xl active tablink" data-tab="tabs-with-rounded-light-1" role="tab"> Tab 1 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-50 tab-active:text-indigo-600 tab-active:rounded-xl tablink" data-tab="tabs-with-rounded-light-2" role="tab"> Tab 2 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-50 tab-active:text-indigo-600 tab-active:rounded-xl tablink" data-tab="tabs-with-rounded-light-3" role="tab"> Tab 3 </a>
 </li>
</ul>
</div>
<div class="mt-3">
<div id="tabs-with-rounded-light-1" role="tabpanel" aria-labelledby="tabs-with-rounded-light-item-1" class="tabcontent">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">first</em> item's tab body. </p>
</div>
<div id="tabs-with-rounded-light-2" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-rounded-light-item-2">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">second</em> item's tab body. </p>
</div>
<div id="tabs-with-rounded-light-3" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-rounded-light-item-3">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">third</em> item's tab body. </p>
</div>
</div>
</div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Tabs with icons

SVG icons can be set and displayed with different tailwind css tabs.

This is the first item's tab body. 

 <div class="tabs">
<div class="flex ">
<ul class="flex min-w-max overflow-x-auto transition-all duration-300 overflow-hidden">
 <li>
   <a href="javascript:void(0)" class="group flex items-center gap-2 py-3 px-6 text-gray-500 border-b border-transparent hover:text-gray-800 font-medium  tab-active:bg-indigo-50 tab-active:text-indigo-600 tab-active:rounded-xl active tablink whitespace-nowrap" data-tab="tabs-with-icon-1" role="tab">
     <svg class="stroke-gray-500 tab-active:stroke-indigo-600 group-hover:stroke-gray-900 transition-none" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_11860_5401)">
         <path d="M1.66699 4.99984C1.66699 3.15889 3.15938 1.6665 5.00033 1.6665C6.84127 1.6665 8.33366 3.15889 8.33366 4.99984C8.33366 6.84079 6.84127 8.33317 5.00033 8.33317C3.15938 8.33317 1.66699 6.84079 1.66699 4.99984Z" stroke="strokeCurrent" stroke-width="1.6" />
         <path d="M1.66699 14.9998C1.66699 13.4285 1.66699 12.6428 2.15515 12.1547C2.6433 11.6665 3.42898 11.6665 5.00033 11.6665C6.57167 11.6665 7.35735 11.6665 7.8455 12.1547C8.33366 12.6428 8.33366 13.4285 8.33366 14.9998C8.33366 16.5712 8.33366 17.3569 7.8455 17.845C7.35735 18.3332 6.57167 18.3332 5.00033 18.3332C3.42898 18.3332 2.6433 18.3332 2.15515 17.845C1.66699 17.3569 1.66699 16.5712 1.66699 14.9998Z" stroke="strokeCurrent" stroke-width="1.6" />
         <path d="M11.667 4.99984C11.667 3.42849 11.667 2.64281 12.1551 2.15466C12.6433 1.6665 13.429 1.6665 15.0003 1.6665C16.5717 1.6665 17.3573 1.6665 17.8455 2.15466C18.3337 2.64281 18.3337 3.42849 18.3337 4.99984C18.3337 6.57119 18.3337 7.35686 17.8455 7.84502C17.3573 8.33317 16.5717 8.33317 15.0003 8.33317C13.429 8.33317 12.6433 8.33317 12.1551 7.84502C11.667 7.35686 11.667 6.57119 11.667 4.99984Z" stroke="strokeCurrent" stroke-width="1.6" />
         <path d="M11.667 14.9998C11.667 13.1589 13.1594 11.6665 15.0003 11.6665C16.8413 11.6665 18.3337 13.1589 18.3337 14.9998C18.3337 16.8408 16.8413 18.3332 15.0003 18.3332C13.1594 18.3332 11.667 16.8408 11.667 14.9998Z" stroke="strokeCurrent" stroke-width="1.6" />
       </g>
       <defs>
         <clipPath id="clip0_11860_5401">
           <rect width="20" height="20" fill="white" />
         </clipPath>
       </defs>
     </svg> Tab 1 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="group flex items-center gap-2 py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-50 tab-active:text-indigo-600 tab-active:rounded-xl tablink whitespace-nowrap" data-tab="tabs-with-icon-2" role="tab">
     <svg class="stroke-gray-500 tab-active:stroke-indigo-600 group-hover:stroke-gray-900 transition-none" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_11860_5401)">
         <path d="M1.66699 4.99984C1.66699 3.15889 3.15938 1.6665 5.00033 1.6665C6.84127 1.6665 8.33366 3.15889 8.33366 4.99984C8.33366 6.84079 6.84127 8.33317 5.00033 8.33317C3.15938 8.33317 1.66699 6.84079 1.66699 4.99984Z" stroke="strokeCurrent" stroke-width="1.6" />
         <path d="M1.66699 14.9998C1.66699 13.4285 1.66699 12.6428 2.15515 12.1547C2.6433 11.6665 3.42898 11.6665 5.00033 11.6665C6.57167 11.6665 7.35735 11.6665 7.8455 12.1547C8.33366 12.6428 8.33366 13.4285 8.33366 14.9998C8.33366 16.5712 8.33366 17.3569 7.8455 17.845C7.35735 18.3332 6.57167 18.3332 5.00033 18.3332C3.42898 18.3332 2.6433 18.3332 2.15515 17.845C1.66699 17.3569 1.66699 16.5712 1.66699 14.9998Z" stroke="strokeCurrent" stroke-width="1.6" />
         <path d="M11.667 4.99984C11.667 3.42849 11.667 2.64281 12.1551 2.15466C12.6433 1.6665 13.429 1.6665 15.0003 1.6665C16.5717 1.6665 17.3573 1.6665 17.8455 2.15466C18.3337 2.64281 18.3337 3.42849 18.3337 4.99984C18.3337 6.57119 18.3337 7.35686 17.8455 7.84502C17.3573 8.33317 16.5717 8.33317 15.0003 8.33317C13.429 8.33317 12.6433 8.33317 12.1551 7.84502C11.667 7.35686 11.667 6.57119 11.667 4.99984Z" stroke="strokeCurrent" stroke-width="1.6" />
         <path d="M11.667 14.9998C11.667 13.1589 13.1594 11.6665 15.0003 11.6665C16.8413 11.6665 18.3337 13.1589 18.3337 14.9998C18.3337 16.8408 16.8413 18.3332 15.0003 18.3332C13.1594 18.3332 11.667 16.8408 11.667 14.9998Z" stroke="strokeCurrent" stroke-width="1.6" />
       </g>
       <defs>
         <clipPath id="clip0_11860_5401">
           <rect width="20" height="20" fill="white" />
         </clipPath>
       </defs>
     </svg> Tab 2 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="group flex items-center gap-2 py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-indigo-50 tab-active:text-indigo-600 tab-active:rounded-xl tablink whitespace-nowrap" data-tab="tabs-with-icon-3" role="tab">
     <svg class="stroke-gray-500 tab-active:stroke-indigo-600 group-hover:stroke-gray-900 transition-none" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_11860_5401)">
         <path d="M1.66699 4.99984C1.66699 3.15889 3.15938 1.6665 5.00033 1.6665C6.84127 1.6665 8.33366 3.15889 8.33366 4.99984C8.33366 6.84079 6.84127 8.33317 5.00033 8.33317C3.15938 8.33317 1.66699 6.84079 1.66699 4.99984Z" stroke="strokeCurrent" stroke-width="1.6" />
         <path d="M1.66699 14.9998C1.66699 13.4285 1.66699 12.6428 2.15515 12.1547C2.6433 11.6665 3.42898 11.6665 5.00033 11.6665C6.57167 11.6665 7.35735 11.6665 7.8455 12.1547C8.33366 12.6428 8.33366 13.4285 8.33366 14.9998C8.33366 16.5712 8.33366 17.3569 7.8455 17.845C7.35735 18.3332 6.57167 18.3332 5.00033 18.3332C3.42898 18.3332 2.6433 18.3332 2.15515 17.845C1.66699 17.3569 1.66699 16.5712 1.66699 14.9998Z" stroke="strokeCurrent" stroke-width="1.6" />
         <path d="M11.667 4.99984C11.667 3.42849 11.667 2.64281 12.1551 2.15466C12.6433 1.6665 13.429 1.6665 15.0003 1.6665C16.5717 1.6665 17.3573 1.6665 17.8455 2.15466C18.3337 2.64281 18.3337 3.42849 18.3337 4.99984C18.3337 6.57119 18.3337 7.35686 17.8455 7.84502C17.3573 8.33317 16.5717 8.33317 15.0003 8.33317C13.429 8.33317 12.6433 8.33317 12.1551 7.84502C11.667 7.35686 11.667 6.57119 11.667 4.99984Z" stroke="strokeCurrent" stroke-width="1.6" />
         <path d="M11.667 14.9998C11.667 13.1589 13.1594 11.6665 15.0003 11.6665C16.8413 11.6665 18.3337 13.1589 18.3337 14.9998C18.3337 16.8408 16.8413 18.3332 15.0003 18.3332C13.1594 18.3332 11.667 16.8408 11.667 14.9998Z" stroke="strokeCurrent" stroke-width="1.6" />
       </g>
       <defs>
         <clipPath id="clip0_11860_5401">
           <rect width="20" height="20" fill="white" />
         </clipPath>
       </defs>
     </svg> Tab 3 </a>
 </li>
</ul>
</div>
<div class="mt-3">
<div id="tabs-with-icon-1" role="tabpanel" aria-labelledby="tabs-with-icon-item-1" class="tabcontent">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">first</em> item's tab body. </p>
</div>
<div id="tabs-with-icon-2" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-icon-item-2">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">second</em> item's tab body. </p>
</div>
<div id="tabs-with-icon-3" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-icon-item-3">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">third</em> item's tab body. </p>
</div>
</div>
</div>

Tabs with badge

Tabs can also be segregated

This is the first item's tab body. 

 <div class="tabs">
<div class="flex ">
<ul class="flex min-w-max overflow-x-auto transition-all duration-300 overflow-hidden">
 <li>
   <a href="javascript:void(0)" class="flex items-center py-3 px-6 text-gray-500 border-b-2 border-transparent hover:text-gray-800 font-medium tab-active:text-indigo-600 tab-active:border-b-indigo-600 active tablink whitespace-nowrap" data-tab="tabs-with-badge-1" role="tab"> Tab 1 <span class="bg-indigo-50 py-1 px-2 rounded-full ml-2 text-xs">New</span>
   </a>
 </li>
 <li>
   <a href="javascript:void(0)" class=" flex items-center py-3 px-6 text-gray-500 border-b-2 border-transparent hover:text-gray-800 font-medium tab-active:text-indigo-600 tab-active:border-b-indigo-600 tablink whitespace-nowrap" data-tab="tabs-with-badge-2" role="tab"> Tab 2 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class=" flex items-center py-3 px-6 text-gray-500 border-b-2 border-transparent hover:text-gray-800 font-medium tab-active:text-indigo-600 tab-active:border-b-indigo-600 tablink whitespace-nowrap" data-tab="tabs-with-badge-3" role="tab"> Tab 3 </a>
 </li>
</ul>
</div>
<div class="mt-3">
<div id="tabs-with-badge-1" role="tabpanel" aria-labelledby="tabs-with-badge-item-1" class="tabcontent">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">first</em> item's tab body. </p>
</div>
<div id="tabs-with-badge-2" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-badge-item-2">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">second</em> item's tab body. </p>
</div>
<div id="tabs-with-badge-3" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-badge-item-3">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">third</em> item's tab body. </p>
</div>
</div>
</div>

Tailwind Vertical Tabs

Tailwind CSS vertical tabs provide a smooth and space-efficient way to organize and navigate content within a web application or website. Vertical tabs are oriented vertically along the side of the screen.

This is the first item's tab body. 

 <div class="tabs flex">
<div class="flex ">
<ul class="flex flex-col bg-gray-100 rounded-2xl transition-all duration-300 p-2 overflow-hidden">
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-white tab-active:rounded-xl tab-active:text-indigo-600 active tablink whitespace-nowrap" data-tab="tabs-with-background-1" role="tab"> Tab 1 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-white tab-active:rounded-xl tab-active:text-indigo-600 tablink whitespace-nowrap" data-tab="tabs-with-background-2" role="tab"> Tab 2 </a>
 </li>
 <li>
   <a href="javascript:void(0)" class="inline-block py-3 px-6 text-gray-500 hover:text-gray-800 font-medium  tab-active:bg-white tab-active:rounded-xl tab-active:text-indigo-600 tablink whitespace-nowrap" data-tab="tabs-with-background-3" role="tab"> Tab 3 </a>
 </li>
</ul>
</div>
<div class="mt-3 px-4">
<div id="tabs-with-background-1" role="tabpanel" aria-labelledby="tabs-with-background-item-1" class="tabcontent">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">first</em> item's tab body. </p>
</div>
<div id="tabs-with-background-2" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-background-item-2">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">second</em> item's tab body. </p>
</div>
<div id="tabs-with-background-3" class="hidden tabcontent" role="tabpanel" aria-labelledby="tabs-with-background-item-3">
 <p class="text-gray-500 "> This is the <em class="font-semibold text-gray-800 ">third</em> item's tab body. </p>
</div>
</div>
</div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More