Checkbox Colors

                    <div class="p-6 space-y-4 bg-white rounded-lg">
  <!-- Primary Color (Blue) -->
  <div class="flex items-center">
    <input id="checkbox-primary" 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-primary" class="ml-2 text-sm font-medium text-gray-700">Primary</label>
  </div>
  
  <!-- Secondary Color (Purple) -->
  <div class="flex items-center">
    <input id="checkbox-secondary" type="checkbox" checked class="w-4 h-4 text-purple-600 bg-gray-100 rounded border-gray-300 focus:ring-purple-500 focus:ring-2">
    <label for="checkbox-secondary" class="ml-2 text-sm font-medium text-gray-700">Secondary</label>
  </div>
  
  <!-- Success Color (Green) -->
  <div class="flex items-center">
    <input id="checkbox-success" type="checkbox" checked class="w-4 h-4 text-green-600 bg-gray-100 rounded border-gray-300 focus:ring-green-500 focus:ring-2">
    <label for="checkbox-success" class="ml-2 text-sm font-medium text-gray-700">Success</label>
  </div>
  
  <!-- Danger Color (Red) -->
  <div class="flex items-center">
    <input id="checkbox-danger" type="checkbox" checked class="w-4 h-4 text-red-600 bg-gray-100 rounded border-gray-300 focus:ring-red-500 focus:ring-2">
    <label for="checkbox-danger" class="ml-2 text-sm font-medium text-gray-700">Danger</label>
  </div>
  
  <!-- Warning Color (Yellow) -->
  <div class="flex items-center">
    <input id="checkbox-warning" type="checkbox" checked class="w-4 h-4 text-yellow-500 bg-gray-100 rounded border-gray-300 focus:ring-yellow-500 focus:ring-2">
    <label for="checkbox-warning" class="ml-2 text-sm font-medium text-gray-700">Warning</label>
  </div>
  
  <!-- Info Color (Cyan) -->
  <div class="flex items-center">
    <input id="checkbox-info" type="checkbox" checked class="w-4 h-4 text-cyan-600 bg-gray-100 rounded border-gray-300 focus:ring-cyan-500 focus:ring-2">
    <label for="checkbox-info" class="ml-2 text-sm font-medium text-gray-700">Info</label>
  </div>
  
  <!-- Dark Color (Gray) -->
  <div class="flex items-center">
    <input id="checkbox-dark" type="checkbox" checked class="w-4 h-4 text-gray-800 bg-gray-100 rounded border-gray-300 focus:ring-gray-500 focus:ring-2">
    <label for="checkbox-dark" class="ml-2 text-sm font-medium text-gray-700">Dark</label>
  </div>
</div>