Tab Responsive

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