Radio Sizes

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