Radio List

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