Tab Basic

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