Tailwind CSS Tab Components

                            <div role="tablist" class="flex border-b border-gray-200">
  <button class="flex items-center px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
      <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
    </svg>
    Home
  </button>
  <button class="flex items-center px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-500">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
      <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
    </svg>
    Profile
  </button>
  <button class="flex items-center px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
    </svg>
    Settings
  </button>
</div>

<div class="p-4">
  <div class="hidden">Home content goes here</div>
  <div>
    <h3 class="text-lg font-medium text-gray-900 mb-2">User Profile</h3>
    <p class="text-gray-600">This is the profile tab content with information about the user.</p>
  </div>
  <div class="hidden">Settings content goes here</div>
</div> 
                        

                            <div class="space-y-8">
  <!-- Extra Small Tabs -->
  <div>
    <h3 class="text-sm font-medium mb-2">Extra Small</h3>
    <div role="tablist" class="flex border-b border-gray-200">
      <button class="px-2 py-1 text-xs font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
      <button class="px-2 py-1 text-xs font-medium text-blue-600 border-b-2 border-blue-500">Tab 2</button>
      <button class="px-2 py-1 text-xs font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
    </div>
  </div>
  
  <!-- Small Tabs -->
  <div>
    <h3 class="text-sm font-medium mb-2">Small</h3>
    <div role="tablist" class="flex border-b border-gray-200">
      <button class="px-3 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
      <button class="px-3 py-1.5 text-sm font-medium text-blue-600 border-b-2 border-blue-500">Tab 2</button>
      <button class="px-3 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
    </div>
  </div>
  
  <!-- Medium Tabs (Default) -->
  <div>
    <h3 class="text-sm font-medium mb-2">Medium (Default)</h3>
    <div role="tablist" class="flex border-b border-gray-200">
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
      <button class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-500">Tab 2</button>
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
    </div>
  </div>
  
  <!-- Large Tabs -->
  <div>
    <h3 class="text-sm font-medium mb-2">Large</h3>
    <div role="tablist" class="flex border-b border-gray-200">
      <button class="px-5 py-2.5 text-base font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
      <button class="px-5 py-2.5 text-base font-medium text-blue-600 border-b-2 border-blue-500">Tab 2</button>
      <button class="px-5 py-2.5 text-base font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
    </div>
  </div>
  
  <!-- Extra Large Tabs -->
  <div>
    <h3 class="text-sm font-medium mb-2">Extra Large</h3>
    <div role="tablist" class="flex border-b border-gray-200">
      <button class="px-6 py-3 text-lg font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
      <button class="px-6 py-3 text-lg font-medium text-blue-600 border-b-2 border-blue-500">Tab 2</button>
      <button class="px-6 py-3 text-lg font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
    </div>
  </div>
</div> 
                        

                            <div>
  <!-- Mobile tabs (stacked) -->
  <div class="md:hidden">
    <div class="space-y-2">
      <button class="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-left text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg">
        <span>Tab 1</span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
      <button class="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-left text-blue-600 bg-blue-50 rounded-lg">
        <span>Tab 2</span>
        <svg class="h-5 w-5 transform rotate-90" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
      <div class="p-4 border border-gray-200 rounded-lg">
        <p class="text-gray-600">This is the mobile content for Tab 2.</p>
      </div>
      <button class="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-left text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg">
        <span>Tab 3</span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </div>
  
  <!-- Desktop tabs (horizontal) -->
  <div class="hidden md:block">
    <div role="tablist" class="flex border-b border-gray-200">
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
      <button class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-500">Tab 2</button>
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
    </div>
    <div class="p-4">
      <div class="hidden">Tab 1 content goes here</div>
      <div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 2 Content</h3>
        <p class="text-gray-600">This is the desktop content for Tab 2. It has a more traditional horizontal tab layout.</p>
      </div>
      <div class="hidden">Tab 3 content goes here</div>
    </div>
  </div>
</div> 
                        

                            <div class="w-full max-w-md mx-auto">
  <div class="border-b border-gray-200">
    <div class="flex -mb-px">
      <input type="radio" id="tab1" name="tabs" class="hidden peer/tab1" />
      <label for="tab1" class="px-4 py-2 text-sm font-medium text-gray-500 border-b-2 border-transparent peer-checked/tab1:text-blue-600 peer-checked/tab1:border-blue-500 hover:text-gray-700 hover:border-gray-300 cursor-pointer">
        Tab 1
      </label>
      
      <input type="radio" id="tab2" name="tabs" class="hidden peer/tab2" checked />
      <label for="tab2" class="px-4 py-2 text-sm font-medium text-gray-500 border-b-2 border-transparent peer-checked/tab2:text-blue-600 peer-checked/tab2:border-blue-500 hover:text-gray-700 hover:border-gray-300 cursor-pointer">
        Tab 2
      </label>
      
      <input type="radio" id="tab3" name="tabs" class="hidden peer/tab3" />
      <label for="tab3" class="px-4 py-2 text-sm font-medium text-gray-500 border-b-2 border-transparent peer-checked/tab3:text-blue-600 peer-checked/tab3:border-blue-500 hover:text-gray-700 hover:border-gray-300 cursor-pointer">
        Tab 3
      </label>
    </div>
  </div>
  
  <div class="p-4">
    <div class="hidden peer-checked/tab1:block">
      <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 1 Content</h3>
      <p class="text-gray-600">This content shows when Tab 1 is selected. Using radio inputs allows for more accessible tabs.</p>
    </div>
    
    <div class="hidden peer-checked/tab2:block">
      <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 2 Content</h3>
      <p class="text-gray-600">This content shows when Tab 2 is selected. Tab 2 is checked by default.</p>
    </div>
    
    <div class="hidden peer-checked/tab3:block">
      <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 3 Content</h3>
      <p class="text-gray-600">This content shows when Tab 3 is selected. The tabs use radio inputs for state management without JavaScript.</p>
    </div>
  </div>
</div> 
                        

                            <div role="tablist" class="flex border-b border-gray-200">
  <button class="px-4 py-2 -mb-px text-sm font-medium text-gray-500 rounded-t-lg hover:bg-gray-50 hover:text-gray-700">Tab 1</button>
  <button class="px-4 py-2 -mb-px text-sm font-medium text-blue-600 bg-white border-l border-t border-r border-gray-200 rounded-t-lg">Tab 2</button>
  <button class="px-4 py-2 -mb-px text-sm font-medium text-gray-500 rounded-t-lg hover:bg-gray-50 hover:text-gray-700">Tab 3</button>
</div>

<div class="p-4 bg-white border-l border-r border-b border-gray-200 rounded-b-lg">
  <div class="hidden">Tab 1 content goes here</div>
  <div>
    <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 2 Content</h3>
    <p class="text-gray-600">This is the content for Tab 2. The active tab appears to be "lifted" above the content area.</p>
  </div>
  <div class="hidden">Tab 3 content goes here</div>
</div> 
                        

                            <div class="space-y-8">
  <!-- Blue Tabs (Default) -->
  <div>
    <h3 class="text-sm font-medium mb-2">Blue Theme (Default)</h3>
    <div role="tablist" class="flex border-b border-gray-200">
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
      <button class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-500">Tab 2</button>
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
    </div>
  </div>
  
  <!-- Red Tabs -->
  <div>
    <h3 class="text-sm font-medium mb-2">Red Theme</h3>
    <div role="tablist" class="flex border-b border-gray-200">
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
      <button class="px-4 py-2 text-sm font-medium text-red-600 border-b-2 border-red-500">Tab 2</button>
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
    </div>
  </div>
  
  <!-- Green Tabs -->
  <div>
    <h3 class="text-sm font-medium mb-2">Green Theme</h3>
    <div role="tablist" class="flex border-b border-gray-200">
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
      <button class="px-4 py-2 text-sm font-medium text-green-600 border-b-2 border-green-500">Tab 2</button>
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
    </div>
  </div>
  
  <!-- Purple Tabs -->
  <div>
    <h3 class="text-sm font-medium mb-2">Purple Theme</h3>
    <div role="tablist" class="flex border-b border-gray-200">
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
      <button class="px-4 py-2 text-sm font-medium text-purple-600 border-b-2 border-purple-500">Tab 2</button>
      <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
    </div>
  </div>
  
  <!-- Dark Tabs -->
  <div>
    <h3 class="text-sm font-medium mb-2">Dark Theme</h3>
    <div role="tablist" class="flex border-b border-gray-600 bg-gray-800 rounded-t-lg">
      <button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-gray-200">Tab 1</button>
      <button class="px-4 py-2 text-sm font-medium text-white border-b-2 border-white">Tab 2</button>
      <button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-gray-200">Tab 3</button>
    </div>
    <div class="p-4 bg-gray-800 text-white rounded-b-lg">
      <p>This is the content for the dark theme tab.</p>
    </div>
  </div>
</div> 
                        

                            <div role="tablist" class="flex space-x-1 p-1 bg-gray-100 rounded-lg">
  <button class="px-4 py-2 text-sm font-medium text-gray-500 rounded-md hover:bg-white hover:text-gray-700">Tab 1</button>
  <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white shadow rounded-md">Tab 2</button>
  <button class="px-4 py-2 text-sm font-medium text-gray-500 rounded-md hover:bg-white hover:text-gray-700">Tab 3</button>
</div>

<div class="p-4 mt-4">
  <div class="hidden">Tab 1 content goes here</div>
  <div>
    <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 2 Content</h3>
    <p class="text-gray-600">This is the content for Tab 2. The box style tabs have a background color and the active tab stands out.</p>
  </div>
  <div class="hidden">Tab 3 content goes here</div>
</div> 
                        

                            <div role="tablist" class="flex border-b border-gray-200">
  <button class="px-4 py-2 -mb-px text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300">Tab 1</button>
  <button class="px-4 py-2 -mb-px text-sm font-medium text-blue-600 border-b-2 border-blue-500">Tab 2</button>
  <button class="px-4 py-2 -mb-px text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300">Tab 3</button>
</div>

<div class="p-4 border border-t-0 border-gray-200 rounded-b-lg">
  <div class="hidden">Tab 1 content goes here</div>
  <div>
    <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 2 Content</h3>
    <p class="text-gray-600">This is the content for Tab 2. It shows by default because Tab 2 is active.</p>
  </div>
  <div class="hidden">Tab 3 content goes here</div>
</div> 
                        

                            <div role="tablist" class="flex border-b border-gray-200">
  <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 1</button>
  <button class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-500">Tab 2</button>
  <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">Tab 3</button>
</div>

<div class="p-4">
  <div class="hidden">Tab 1 content goes here</div>
  <div>Tab 2 content shows here by default because it's the active tab</div>
  <div class="hidden">Tab 3 content goes here</div>
</div>