Tab Colors

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