Tailwind CSS Radio Components

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-5">
    <!-- Radio with Simple Label -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-simple" name="radio-labels" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" checked>
      <label for="radio-simple" class="text-sm font-medium text-gray-700">Radio with Simple Label</label>
    </div>
    
    <!-- Radio with Description -->
    <div class="flex gap-2">
      <div class="flex h-5 items-center">
        <input type="radio" id="radio-description" name="radio-labels" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
      </div>
      <div class="text-sm">
        <label for="radio-description" class="font-medium text-gray-700">Radio with Description</label>
        <p class="text-gray-500">Additional details about this option to help users make an informed decision.</p>
      </div>
    </div>
    
    <!-- Radio with Icon Label -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-icon" name="radio-labels" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
      <label for="radio-icon" class="flex items-center gap-1.5 text-sm font-medium text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
        </svg>
        Radio with Icon Label
      </label>
    </div>
    
    <!-- Radio with Card Label -->
    <div class="relative flex">
      <input type="radio" id="radio-card" name="radio-labels" class="peer sr-only">
      <label for="radio-card" class="flex flex-col p-4 border rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:ring-1 peer-checked:ring-blue-500 hover:bg-gray-50">
        <span class="text-sm font-medium text-gray-700">Premium Plan</span>
        <span class="mt-1 text-sm text-gray-500">$29/month</span>
        <span class="mt-4 text-xs text-gray-500">Includes all premium features with priority support</span>
      </label>
      <div class="absolute top-4 right-4 flex h-5 items-center text-blue-600 opacity-0 peer-checked:opacity-100">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
      </div>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Extra Small Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-xs" name="radio-size" class="w-3 h-3 text-blue-600 border-gray-300 focus:ring-blue-500">
      <label for="radio-xs" class="text-xs font-medium text-gray-700">Extra Small</label>
    </div>
    
    <!-- Small Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-sm" name="radio-size" class="w-3.5 h-3.5 text-blue-600 border-gray-300 focus:ring-blue-500">
      <label for="radio-sm" class="text-sm font-medium text-gray-700">Small</label>
    </div>
    
    <!-- Medium Radio (Default) -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-md" name="radio-size" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" checked>
      <label for="radio-md" class="text-base font-medium text-gray-700">Medium (Default)</label>
    </div>
    
    <!-- Large Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-lg" name="radio-size" class="w-5 h-5 text-blue-600 border-gray-300 focus:ring-blue-500">
      <label for="radio-lg" class="text-lg font-medium text-gray-700">Large</label>
    </div>
    
    <!-- Extra Large Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-xl" name="radio-size" class="w-6 h-6 text-blue-600 border-gray-300 focus:ring-blue-500">
      <label for="radio-xl" class="text-xl font-medium text-gray-700">Extra Large</label>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Simple Radio List -->
    <div class="space-y-2">
      <h3 class="text-sm font-medium text-gray-700">Select a Category</h3>
      <ul class="space-y-2 border rounded-md divide-y">
        <li class="p-3">
          <div class="flex items-center gap-3">
            <input type="radio" id="category-1" name="category" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" checked>
            <label for="category-1" class="text-sm font-medium text-gray-700">Electronics</label>
          </div>
        </li>
        <li class="p-3">
          <div class="flex items-center gap-3">
            <input type="radio" id="category-2" name="category" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
            <label for="category-2" class="text-sm font-medium text-gray-700">Clothing</label>
          </div>
        </li>
        <li class="p-3">
          <div class="flex items-center gap-3">
            <input type="radio" id="category-3" name="category" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
            <label for="category-3" class="text-sm font-medium text-gray-700">Home & Garden</label>
          </div>
        </li>
        <li class="p-3">
          <div class="flex items-center gap-3">
            <input type="radio" id="category-4" name="category" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
            <label for="category-4" class="text-sm font-medium text-gray-700">Books</label>
          </div>
        </li>
      </ul>
    </div>
    
    <!-- Radio List with Descriptions -->
    <div class="space-y-2">
      <h3 class="text-sm font-medium text-gray-700">Choose a Plan</h3>
      <ul class="space-y-3">
        <li class="relative border rounded-md p-4 hover:bg-gray-50">
          <input type="radio" id="plan-a" name="plan" class="peer sr-only" checked>
          <label for="plan-a" class="flex flex-col cursor-pointer">
            <span class="text-sm font-medium text-gray-900">Basic Plan</span>
            <span class="mt-1 text-sm text-gray-500">Perfect for individuals</span>
            <span class="mt-2 text-sm font-semibold text-gray-900">$9.99/month</span>
          </label>
          <div class="absolute top-4 right-4 w-4 h-4 border rounded-full peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:ring-2 peer-checked:ring-blue-500"></div>
          <div class="absolute top-4 right-4 w-4 h-4 text-blue-600 opacity-0 peer-checked:opacity-100">
            <div class="w-2 h-2 bg-blue-600 rounded-full mx-auto mt-1"></div>
          </div>
        </li>
        
        <li class="relative border rounded-md p-4 hover:bg-gray-50">
          <input type="radio" id="plan-b" name="plan" class="peer sr-only">
          <label for="plan-b" class="flex flex-col cursor-pointer">
            <span class="text-sm font-medium text-gray-900">Pro Plan</span>
            <span class="mt-1 text-sm text-gray-500">Great for small teams</span>
            <span class="mt-2 text-sm font-semibold text-gray-900">$19.99/month</span>
          </label>
          <div class="absolute top-4 right-4 w-4 h-4 border rounded-full peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:ring-2 peer-checked:ring-blue-500"></div>
          <div class="absolute top-4 right-4 w-4 h-4 text-blue-600 opacity-0 peer-checked:opacity-100">
            <div class="w-2 h-2 bg-blue-600 rounded-full mx-auto mt-1"></div>
          </div>
        </li>
        
        <li class="relative border rounded-md p-4 hover:bg-gray-50">
          <input type="radio" id="plan-c" name="plan" class="peer sr-only">
          <label for="plan-c" class="flex flex-col cursor-pointer">
            <span class="text-sm font-medium text-gray-900">Enterprise Plan</span>
            <span class="mt-1 text-sm text-gray-500">For large organizations</span>
            <span class="mt-2 text-sm font-semibold text-gray-900">$49.99/month</span>
          </label>
          <div class="absolute top-4 right-4 w-4 h-4 border rounded-full peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:ring-2 peer-checked:ring-blue-500"></div>
          <div class="absolute top-4 right-4 w-4 h-4 text-blue-600 opacity-0 peer-checked:opacity-100">
            <div class="w-2 h-2 bg-blue-600 rounded-full mx-auto mt-1"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</section> 
                        

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

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-5">
    <!-- Enabled Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-enabled" name="radio-state" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" checked>
      <label for="radio-enabled" class="text-sm font-medium text-gray-700">Enabled Radio</label>
    </div>
    
    <!-- Disabled Radio (Unchecked) -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-disabled-unchecked" name="radio-state-disabled" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 opacity-50 cursor-not-allowed" disabled>
      <label for="radio-disabled-unchecked" class="text-sm font-medium text-gray-400 cursor-not-allowed">Disabled Radio (Unchecked)</label>
    </div>
    
    <!-- Disabled Radio (Checked) -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-disabled-checked" name="radio-state-disabled" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 opacity-50 cursor-not-allowed" checked disabled>
      <label for="radio-disabled-checked" class="text-sm font-medium text-gray-400 cursor-not-allowed">Disabled Radio (Checked)</label>
    </div>
    
    <!-- Disabled Form Example -->
    <fieldset disabled class="mt-6 border border-gray-200 rounded-md p-4">
      <legend class="text-sm font-medium text-gray-500 px-2">Disabled Form Group</legend>
      
      <div class="space-y-3 mt-2">
        <div class="flex items-center gap-2">
          <input type="radio" id="option-a" name="disabled-group" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 cursor-not-allowed" checked>
          <label for="option-a" class="text-sm font-medium text-gray-400">Option A</label>
        </div>
        
        <div class="flex items-center gap-2">
          <input type="radio" id="option-b" name="disabled-group" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 cursor-not-allowed">
          <label for="option-b" class="text-sm font-medium text-gray-400">Option B</label>
        </div>
        
        <div class="flex items-center gap-2">
          <input type="radio" id="option-c" name="disabled-group" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 cursor-not-allowed">
          <label for="option-c" class="text-sm font-medium text-gray-400">Option C</label>
        </div>
      </div>
    </fieldset>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-5">
    <!-- Custom Red Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-red" name="radio-custom" class="w-4 h-4 bg-red-100 text-red-600 border-red-300 focus:ring-red-500" checked>
      <label for="radio-red" class="text-sm font-medium text-red-700">Custom Red</label>
    </div>
    
    <!-- Custom Purple Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-purple" name="radio-custom" class="w-4 h-4 bg-purple-100 text-purple-600 border-purple-300 focus:ring-purple-500">
      <label for="radio-purple" class="text-sm font-medium text-purple-700">Custom Purple</label>
    </div>
    
    <!-- Custom Teal Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-teal" name="radio-custom" class="w-4 h-4 bg-teal-100 text-teal-600 border-teal-300 focus:ring-teal-500">
      <label for="radio-teal" class="text-sm font-medium text-teal-700">Custom Teal</label>
    </div>
    
    <!-- Custom Orange Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-orange" name="radio-custom" class="w-4 h-4 bg-orange-100 text-orange-600 border-orange-300 focus:ring-orange-500">
      <label for="radio-orange" class="text-sm font-medium text-orange-700">Custom Orange</label>
    </div>
    
    <!-- Custom Pink Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-pink" name="radio-custom" class="w-4 h-4 bg-pink-100 text-pink-600 border-pink-300 focus:ring-pink-500">
      <label for="radio-pink" class="text-sm font-medium text-pink-700">Custom Pink</label>
    </div>
    
    <!-- Custom Gradient Background -->
    <div class="p-4 rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50">
      <div class="flex items-center gap-2">
        <input type="radio" id="radio-gradient" name="radio-gradient" class="w-4 h-4 bg-white text-indigo-600 border-indigo-300 focus:ring-indigo-500" checked>
        <label for="radio-gradient" class="text-sm font-medium text-indigo-700">Radio with Gradient Background</label>
      </div>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-4">
    <!-- Default Color -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-default" name="radio-color" class="w-4 h-4 text-gray-600 border-gray-300 focus:ring-gray-500" checked>
      <label for="radio-default" class="text-sm font-medium text-gray-700">Default</label>
    </div>
    
    <!-- Primary Color -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-primary" name="radio-color" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
      <label for="radio-primary" class="text-sm font-medium text-blue-700">Primary</label>
    </div>
    
    <!-- Success Color -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-success" name="radio-color" class="w-4 h-4 text-green-600 border-gray-300 focus:ring-green-500">
      <label for="radio-success" class="text-sm font-medium text-green-700">Success</label>
    </div>
    
    <!-- Warning Color -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-warning" name="radio-color" class="w-4 h-4 text-yellow-600 border-gray-300 focus:ring-yellow-500">
      <label for="radio-warning" class="text-sm font-medium text-yellow-700">Warning</label>
    </div>
    
    <!-- Danger Color -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-danger" name="radio-color" class="w-4 h-4 text-red-600 border-gray-300 focus:ring-red-500">
      <label for="radio-danger" class="text-sm font-medium text-red-700">Danger</label>
    </div>
    
    <!-- Info Color -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-info" name="radio-color" class="w-4 h-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
      <label for="radio-info" class="text-sm font-medium text-indigo-700">Info</label>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-4">
    <div class="flex items-center gap-2">
      <input type="radio" id="option1" name="radio-group" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" checked>
      <label for="option1" class="text-sm font-medium text-gray-700">Option 1</label>
    </div>
    
    <div class="flex items-center gap-2">
      <input type="radio" id="option2" name="radio-group" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
      <label for="option2" class="text-sm font-medium text-gray-700">Option 2</label>
    </div>
    
    <div class="flex items-center gap-2">
      <input type="radio" id="option3" name="radio-group" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
      <label for="option3" class="text-sm font-medium text-gray-700">Option 3</label>
    </div>
  </div>
</section>