Application toolkit - Tabs

Tabs make it easy to switch between different views.

About

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.

Tabs with underline

A basic form of tabs with underline.

Open this with underline tabs example in new window
Copy with underline tabs code 
<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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600 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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" 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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary-600" 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>
Close with underline tabs code

Tabs with icons

Contained tabs with icons.

Open this with icons tabs example in new window
Copy with icons tabs code 
<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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary active" id="tabs-with-icons-item-1" data-hs-tab="#tabs-with-icons-1" aria-controls="tabs-with-icons-1" role="tab">
      <svg class="hs-tab-active:text-hs2-primary dark:hs-tab-active:text-hs2-primary w-3.5 h-3.5 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
        <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
      </svg>
      Tab 1
    </button>
    <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary" id="tabs-with-icons-item-2" data-hs-tab="#tabs-with-icons-2" aria-controls="tabs-with-icons-2" role="tab">
      <svg class="hs-tab-active:text-hs2-primary dark:hs-tab-active:text-hs2-primary w-3.5 h-3.5 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
      </svg>
      Tab 2
    </button>
    <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary" id="tabs-with-icons-item-3" data-hs-tab="#tabs-with-icons-3" aria-controls="tabs-with-icons-3" role="tab">
      <svg class="hs-tab-active:text-hs2-primary dark:hs-tab-active:text-hs2-primary w-3.5 h-3.5 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
        <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
      </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>
Close with icons tabs code

Tabs with badges

Contained tabs with badges.

Open this with badges tabs example in new window
Copy with badges tabs code 
<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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary 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-hs2-primary dark:hs-tab-active:bg-blue-800 dark:hs-tab-active:text-white ml-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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary" 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-hs2-primary dark:hs-tab-active:bg-blue-800 dark:hs-tab-active:text-white ml-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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary" 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>
Close with badges tabs code

Horizontal alignment

Centered with .justify-center:

Open this centered tabs example in new window
Copy centered tabs code 
<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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary 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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary" 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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary" 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>
Close centered tabs code

Right-aligned with .justify-end:

Open this right aligned tabs example in new window
Copy right aligned tabs code 
<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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary 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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary" 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-hs2-primary hs-tab-active:text-hs2-primary py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary" 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>
Close right aligned tabs code

Vertical

Vertically stacked navigation.

Open this vertical tabs example in new window
Copy vertical tabs code 
<div class="flex flex-wrap">
  <div class="border-r 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-hs2-primary hs-tab-active:text-hs2-primary dark:hs-tab-active:text-hs2-primary py-1 pr-4 inline-flex items-center gap-2 border-r-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary 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-hs2-primary hs-tab-active:text-hs2-primary dark:hs-tab-active:text-hs2-primary py-1 pr-4 inline-flex items-center gap-2 border-r-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary dark:hover:text-gray-300" 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-hs2-primary hs-tab-active:text-hs2-primary dark:hs-tab-active:text-hs2-primary py-1 pr-4 inline-flex items-center gap-2 border-r-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-hs2-primary dark:hover:text-gray-300" 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="ml-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>
Close vertical tabs code

Card type tab

Another type of Tabs.

Open this card type tabs example in new window
Copy card type tabs code 
<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-hs2-primary 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 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 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-hs2-primary 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 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300" 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-hs2-primary 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 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300" 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>
Close card type tabs code

Select on mobile

Where long content doesn't fit on the screen, change the tab bar to <select> on mobile.

Open this select on mobile tabs example in new window
Copy select on mobile tabs code 
<select id="tab-select" class="sm:hidden py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary 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-hs2-primary 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 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 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-hs2-primary 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 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300" 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-hs2-primary 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 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300" 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">
    <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="hs-tab-to-select-2" class="hidden" role="tabpanel" aria-labelledby="hs-tab-to-select-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="hs-tab-to-select-3" class="hidden" role="tabpanel" aria-labelledby="hs-tab-to-select-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>
Close select on mobile tabs code

Segment

Another type of Tabs with segment.

Open this segment tabs example in new window
Copy segment tabs code 
<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-2 bg-transparent text-sm text-gray-500 hover:text-gray-700 font-medium rounded-md hover:hover:text-hs2-primary 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-2 bg-transparent text-sm text-gray-500 hover:text-gray-700 font-medium rounded-md hover:hover:text-hs2-primary 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-2 bg-transparent text-sm text-gray-500 hover:text-gray-700 font-medium rounded-md hover:hover:text-hs2-primary 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>
Close segment tabs code

Bar with underline

Another type of Tabs with underlined bar.

Open this bar with underline tabs example in new window
Copy bar with underline tabs code 
<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-hs2-primary hs-tab-active:text-gray-900 dark:hs-tab-active:text-white dark:hs-tab-active:border-b-hs2-primary relative min-w-0 flex-1 bg-white first:border-l-0 border-l 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 dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 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-hs2-primary hs-tab-active:text-gray-900 dark:hs-tab-active:text-white dark:hs-tab-active:border-b-hs2-primary relative min-w-0 flex-1 bg-white first:border-l-0 border-l 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 dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-400 dark:hover:text-gray-300" 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-hs2-primary hs-tab-active:text-gray-900 dark:hs-tab-active:text-white dark:hs-tab-active:border-b-hs2-primary relative min-w-0 flex-1 bg-white first:border-l-0 border-l 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 dark:bg-gray-800 dark:border-l-gray-700 dark:border-b-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-400 dark:hover:text-gray-300" 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>
Close bar with underline tabs code

Pills on gray color

Another type of Tabs with pills on gray color.

Open this pills gray colour tabs example in new window
Copy pills gray colour tabs code 
<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-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 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-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 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-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 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>
Close pills gray colour tabs code

Pills with brand color

Another type of Tabs with pills.

Open this pills brand colour tabs example in new window
Copy pills brand colour tabs code 
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
  <button type="button" class="hs-tab-active:bg-hs2-primary hs-tab-active:text-white py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 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-hs2-primary hs-tab-active:text-white py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 dark:hover:text-gray-300" 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-hs2-primary hs-tab-active:text-white py-3 px-4 inline-flex items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 dark:hover:text-gray-300" 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>
Close pills brand colour tabs code

Fill and justify

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.

Open this fill and justify tabs example in new window
Copy fill and justify tabs code 
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
  <button type="button" class="hs-tab-active:bg-hs2-primary hs-tab-active:text-white flex-auto py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 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-hs2-primary hs-tab-active:text-white flex-auto py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 dark:hover:text-gray-300" 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-hs2-primary hs-tab-active:text-white flex-auto py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 dark:hover:text-gray-300" 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>
Close fill and justify tabs code

Equal-width elements

All horizontal space will be occupied by nav links, but unlike the example above, every nav item will be the same width.

Open this equal width tabs example in new window
Copy equal width tabs code 
<nav class="flex space-x-2" aria-label="Tabs" role="tablist">
  <button type="button" class="hs-tab-active:bg-hs2-primary hs-tab-active:text-white basis-0 grow py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 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-hs2-primary hs-tab-active:text-white basis-0 grow py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 dark:hover:text-gray-300" 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-hs2-primary hs-tab-active:text-white basis-0 grow py-3 px-4 inline-flex justify-center items-center gap-2 bg-transparent text-sm font-medium text-center text-gray-500 rounded-lg hover:text-hs2-primary dark:hover:text-gray-400 dark:hover:text-gray-300" 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>
Close equal width tabs code