Tab Box

                    <div role="tablist" class="flex space-x-1 p-1 bg-gray-100 rounded-lg">
  <button class="px-4 py-2 text-sm font-medium text-gray-500 rounded-md hover:bg-white hover:text-gray-700">Tab 1</button>
  <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white shadow rounded-md">Tab 2</button>
  <button class="px-4 py-2 text-sm font-medium text-gray-500 rounded-md hover:bg-white hover:text-gray-700">Tab 3</button>
</div>

<div class="p-4 mt-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 content for Tab 2. The box style tabs have a background color and the active tab stands out.</p>
  </div>
  <div class="hidden">Tab 3 content goes here</div>
</div>