Checkbox Sizes

                    <div class="p-6 space-y-6 bg-white rounded-lg">
  <!-- Extra Small Checkbox -->
  <div class="flex items-center">
    <input id="checkbox-xs" type="checkbox" checked class="w-3 h-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-1">
    <label for="checkbox-xs" class="ml-2 text-xs font-medium text-gray-700">Extra small</label>
  </div>
  
  <!-- Small Checkbox -->
  <div class="flex items-center">
    <input id="checkbox-sm" type="checkbox" checked class="w-3.5 h-3.5 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-1">
    <label for="checkbox-sm" class="ml-2 text-sm font-medium text-gray-700">Small</label>
  </div>
  
  <!-- Default/Medium Checkbox -->
  <div class="flex items-center">
    <input id="checkbox-md" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2">
    <label for="checkbox-md" class="ml-2 text-base font-medium text-gray-700">Default</label>
  </div>
  
  <!-- Large Checkbox -->
  <div class="flex items-center">
    <input id="checkbox-lg" type="checkbox" checked class="w-5 h-5 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2">
    <label for="checkbox-lg" class="ml-2 text-lg font-medium text-gray-700">Large</label>
  </div>
  
  <!-- Extra Large Checkbox -->
  <div class="flex items-center">
    <input id="checkbox-xl" type="checkbox" checked class="w-6 h-6 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2">
    <label for="checkbox-xl" class="ml-2 text-xl font-medium text-gray-700">Extra large</label>
  </div>
</div>