Radio Group

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Basic Radio Group -->
    <fieldset class="border border-gray-200 rounded-md p-4">
      <legend class="text-sm font-medium text-gray-700 px-2">Subscription Plan</legend>
      
      <div class="space-y-3 mt-2">
        <div class="flex items-center gap-2">
          <input type="radio" id="plan-basic" name="subscription" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" checked>
          <label for="plan-basic" class="text-sm font-medium text-gray-700">Basic Plan</label>
        </div>
        
        <div class="flex items-center gap-2">
          <input type="radio" id="plan-pro" name="subscription" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
          <label for="plan-pro" class="text-sm font-medium text-gray-700">Pro Plan</label>
        </div>
        
        <div class="flex items-center gap-2">
          <input type="radio" id="plan-enterprise" name="subscription" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
          <label for="plan-enterprise" class="text-sm font-medium text-gray-700">Enterprise Plan</label>
        </div>
      </div>
    </fieldset>
    
    <!-- Inline Radio Group -->
    <div class="space-y-2">
      <label class="text-sm font-medium text-gray-700">Delivery Method</label>
      <div class="flex flex-wrap gap-4">
        <div class="flex items-center gap-2">
          <input type="radio" id="delivery-standard" name="delivery" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" checked>
          <label for="delivery-standard" class="text-sm font-medium text-gray-700">Standard</label>
        </div>
        
        <div class="flex items-center gap-2">
          <input type="radio" id="delivery-express" name="delivery" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
          <label for="delivery-express" class="text-sm font-medium text-gray-700">Express</label>
        </div>
        
        <div class="flex items-center gap-2">
          <input type="radio" id="delivery-overnight" name="delivery" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
          <label for="delivery-overnight" class="text-sm font-medium text-gray-700">Overnight</label>
        </div>
      </div>
    </div>
    
    <!-- Radio Button Group (Visual Button Style) -->
    <div class="space-y-2">
      <label class="text-sm font-medium text-gray-700">Layout Size</label>
      <div class="inline-flex rounded-md shadow-sm" role="group">
        <div class="relative">
          <input type="radio" id="size-sm" name="layout-size" class="peer sr-only" checked>
          <label for="size-sm" class="peer-checked:bg-blue-50 peer-checked:text-blue-600 peer-checked:border-blue-600 inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg cursor-pointer hover:bg-gray-100">
            Small
          </label>
        </div>
        <div class="relative -ml-px">
          <input type="radio" id="size-md" name="layout-size" class="peer sr-only">
          <label for="size-md" class="peer-checked:bg-blue-50 peer-checked:text-blue-600 peer-checked:border-blue-600 inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 cursor-pointer hover:bg-gray-100">
            Medium
          </label>
        </div>
        <div class="relative -ml-px">
          <input type="radio" id="size-lg" name="layout-size" class="peer sr-only">
          <label for="size-lg" class="peer-checked:bg-blue-50 peer-checked:text-blue-600 peer-checked:border-blue-600 inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-lg cursor-pointer hover:bg-gray-100">
            Large
          </label>
        </div>
      </div>
    </div>
  </div>
</section>