Radio With Label

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