Radio Colors

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