Tailwind CSS Tabs

Get started on your web project with our responsive Tailwind CSS tabs that create a secondary navigational hierarchy for your website.

Tabs are components that render and display subsections to users. They arrange the content into categories for easy access and a cleaner-looking app.

See below our example that will help you create a simple and easy-to-use tabs for your Tailwind CSS and project.


<div class="w-9/12">
  <nav>
    <ul role="tablist" class="tabs p-1">
      <li class="nav-item">
        <a
          class="nav-link active mb-0 px-0 py-1"
          aria-selected="true"
          aria-controls="myprofile"
          role="tab"
          >My Profile</a
        >
      </li>
      <li class="nav-item">
        <a
          class="nav-link mb-0 px-0 py-1"
          aria-selected="false"
          aria-controls="mydashboard"
          role="tab"
          >Dashboard</a
        >
      </li>
    </ul>
  </nav>
</div>

Tabs with icon

<div class="w-9/12">
  <nav>
    <ul role="tablist" class="tabs p-1">
      <li class="nav-item">
        <a
          class="nav-link active mb-0 px-0 py-1"
          aria-selected="true"
          aria-controls="profile"
          role="tab"
          ><i class="material-icons mr-2 text-sm">person</i>My Profile</a
        >
      </li>
      <li class="nav-item">
        <a
          class="nav-link mb-0 px-0 py-1"
          aria-selected="false"
          aria-controls="dashboard"
          role="tab"
          ><i class="material-icons mr-2 text-sm">dashboard</i>Dashboard</a
        >
      </li>
    </ul>
  </nav>
</div>

Tabs with content

<div class="nav-tabs w-9/12">
  <nav>
    <ul role="tablist" class="tabs p-1" tab-panel="">
      <li class="nav-item">
        <a
          class="nav-link active mb-0 px-0 py-1"
          aria-selected="true"
          aria-controls="html"
          role="tab"
          >HTML</a
        >
      </li>
      <li class="nav-item">
        <a
          class="nav-link mb-0 px-0 py-1"
          aria-selected="false"
          aria-controls="react"
          role="tab"
          >React</a
        >
      </li>
      <li class="nav-item">
        <a
          class="nav-link mb-0 px-0 py-1"
          aria-selected="false"
          aria-controls="vue"
          role="tab"
          >Vue</a
        >
      </li>
      <li class="nav-item">
        <a
          class="nav-link mb-0 px-0 py-1"
          aria-selected="false"
          aria-controls="angular"
          role="tab"
          >Angular</a
        >
      </li>
      <li class="nav-item">
        <a
          class="nav-link mb-0 px-0 py-1"
          aria-selected="false"
          aria-controls="svelte"
          role="tab"
          >Svelte</a
        >
      </li>
    </ul>
  </nav>
  <div class="tabs-content p-5">
    <div class="active tab-panel" id="html" role="tabpanel">
      Because it's about motivating the doers. Because I'm here to follow my
      dreams and inspire other people to follow their dreams, too.
    </div>
    <div class="tab-panel" id="react" role="tabpanel">
      The reading of all good books is like a conversation with the finest minds
      of past centuries.
    </div>
    <div class="tab-panel" id="vue" role="tabpanel">
      Comparing yourself to others is the thief of joy.
    </div>
    <div class="tab-panel" id="angular" role="tabpanel">
      It's better to choose, commit, and get started instead of waiting for the
      best possible option.
    </div>
    <div class="tab-panel" id="svelte" role="tabpanel">
      If you think you can learn a lot from reading books, try writing one.
    </div>
  </div>
</div>

Vertical Tabs Content

All you have to do is to set .flex-col class for the ul

<div class="nav-tabs flex w-9/12">
  <div class="w-1/3">
    <nav>
      <ul role="tablist" class="tabs flex-col p-1" tab-panel="">
        <li class="nav-item">
          <a
            class="nav-link active mb-0 px-0 py-1"
            aria-selected="true"
            aria-controls="html"
            role="tab"
            >Home</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link mb-0 px-0 py-1"
            aria-selected="false"
            aria-controls="react"
            role="tab"
            >Profile</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link mb-0 px-0 py-1"
            aria-selected="false"
            aria-controls="vue"
            role="tab"
            >Messages</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link mb-0 px-0 py-1"
            aria-selected="false"
            aria-controls="angular"
            role="tab"
            >Settings</a
          >
        </li>
      </ul>
    </nav>
  </div>
  <div class="w-2/3">
    <div class="tabs-content p-5">
      <div class="active tab-panel" id="home" role="tabpanel">
        Because it's about motivating the doers. Because I'm here to follow my
        dreams and inspire other people to follow their dreams, too.
      </div>
      <div class="tab-panel" id="profile" role="tabpanel">
        The reading of all good books is like a conversation with the finest
        minds of past centuries.
      </div>
      <div class="tab-panel" id="messages" role="tabpanel">
        Comparing yourself to others is the thief of joy.
      </div>
      <div class="tab-panel" id="settings" role="tabpanel">
        It's better to choose, commit, and get started instead of waiting for
        the best possible option.
      </div>
    </div>
  </div>
</div>

Required Scrips

The tabs component needs a required script files to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/tabs.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/tabs.js"></script>
Edit this page on Github