Tabs

Basic #

<nav class="tab">
  <a class="tab-link active" href="#">Settings</a>
  <a class="tab-link" href="#">Integrations</a>
  <a class="tab-link" href="#">Notifications</a>
  <a class="tab-link disabled" href="#" tabindex="-1" aria-disabled="true">Advanced</a>
</nav>

Alignment #

<div class="space-y-2">
  <nav class="tab justify-center">
    <a class="tab-link active" href="#">Settings</a>
    <a class="tab-link" href="#">Integrations</a>
    <a class="tab-link" href="#">Notifications</a>
  </nav>
  <nav class="tab justify-end">
    <a class="tab-link active" href="#">Settings</a>
    <a class="tab-link" href="#">Integrations</a>
    <a class="tab-link" href="#">Notifications</a>
  </nav>
</div>

Full Width #

<nav class="tab tab-full">
  <a class="tab-link active" href="#">Settings</a>
  <a class="tab-link" href="#">Integrations</a>
  <a class="tab-link" href="#">Notifications</a>
</nav>

Sizes #

<div class="space-y-2">
  <nav class="tab tab-sm">
    <a class="tab-link active" href="#">Settings</a>
    <a class="tab-link" href="#">Integrations</a>
    <a class="tab-link" href="#">Notifications</a>
  </nav>
  <nav class="tab tab-lg">
    <a class="tab-link active" href="#">Settings</a>
    <a class="tab-link" href="#">Integrations</a>
    <a class="tab-link" href="#">Notifications</a>
  </nav>
</div>

Vertical #

<nav class="tab tab-vertical">
  <a class="tab-link active" href="#">Settings</a>
  <a class="tab-link" href="#">Integrations</a>
  <a class="tab-link" href="#">Notifications</a>
  <a class="tab-link disabled" href="#" tabindex="-1" aria-disabled="true">Advanced</a>
</nav>