Tab Border

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