Tab Radio

                    <div class="w-full max-w-md mx-auto">
  <div class="border-b border-gray-200">
    <div class="flex -mb-px">
      <input type="radio" id="tab1" name="tabs" class="hidden peer/tab1" />
      <label for="tab1" class="px-4 py-2 text-sm font-medium text-gray-500 border-b-2 border-transparent peer-checked/tab1:text-blue-600 peer-checked/tab1:border-blue-500 hover:text-gray-700 hover:border-gray-300 cursor-pointer">
        Tab 1
      </label>
      
      <input type="radio" id="tab2" name="tabs" class="hidden peer/tab2" checked />
      <label for="tab2" class="px-4 py-2 text-sm font-medium text-gray-500 border-b-2 border-transparent peer-checked/tab2:text-blue-600 peer-checked/tab2:border-blue-500 hover:text-gray-700 hover:border-gray-300 cursor-pointer">
        Tab 2
      </label>
      
      <input type="radio" id="tab3" name="tabs" class="hidden peer/tab3" />
      <label for="tab3" class="px-4 py-2 text-sm font-medium text-gray-500 border-b-2 border-transparent peer-checked/tab3:text-blue-600 peer-checked/tab3:border-blue-500 hover:text-gray-700 hover:border-gray-300 cursor-pointer">
        Tab 3
      </label>
    </div>
  </div>
  
  <div class="p-4">
    <div class="hidden peer-checked/tab1:block">
      <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 1 Content</h3>
      <p class="text-gray-600">This content shows when Tab 1 is selected. Using radio inputs allows for more accessible tabs.</p>
    </div>
    
    <div class="hidden peer-checked/tab2:block">
      <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 2 Content</h3>
      <p class="text-gray-600">This content shows when Tab 2 is selected. Tab 2 is checked by default.</p>
    </div>
    
    <div class="hidden peer-checked/tab3:block">
      <h3 class="text-lg font-medium text-gray-900 mb-2">Tab 3 Content</h3>
      <p class="text-gray-600">This content shows when Tab 3 is selected. The tabs use radio inputs for state management without JavaScript.</p>
    </div>
  </div>
</div>