Tab Sizes

                    <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>