BetaCodophile is currently in active development. Features may change rapidly! 🚀
Back to Tailwind

Tabs

Responsive tab navigations with underline, pill, and bar variations.

Appearance

My Account

Manage your account details and preferences.

HTML Output
<div>
  <div class="sm:hidden">
    <label for="tabs" class="sr-only">Select a tab</label>
    <select id="tabs" name="tabs" class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
      <option selected>My Account</option>
      <!-- ... other options -->
    </select>
  </div>
  <div class="hidden sm:block">
    <div class="border-b border-gray-200 dark:border-gray-700">
      <nav class="-mb-px flex space-x-8" aria-label="Tabs">
      
    <a
      href="#" 
      class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium border-indigo-500 text-indigo-600 bg-indigo-100/10 "
      aria-current="page"
    >
      
      My Account
    </a>
    
    <a
      href="#" 
      class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 "
      
    >
      
      Company
    </a>
    
    <a
      href="#" 
      class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 "
      
    >
      
      Team Members
    </a>
    
    <a
      href="#" 
      class="whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 "
      
    >
      
      Billing
    </a>
      </nav>
    </div>
  </div>
</div>