Radio Custom

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