Tailwind CSS Checkbox Components

                            <div class="p-6 space-y-6 bg-white rounded-lg">
  <!-- Default State -->
  <div class="flex items-center">
    <input id="checkbox-default" type="checkbox" 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-default" class="ml-2 text-sm font-medium text-gray-700">Default state</label>
  </div>
  
  <!-- Checked State -->
  <div class="flex items-center">
    <input id="checkbox-checked" 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-checked" class="ml-2 text-sm font-medium text-gray-700">Checked state</label>
  </div>
  
  <!-- Indeterminate State -->
  <div class="flex items-center">
    <input id="checkbox-indeterminate" type="checkbox" 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-indeterminate" class="ml-2 text-sm font-medium text-gray-700">Indeterminate state</label>
  </div>
  
  <!-- Disabled State (Unchecked) -->
  <div class="flex items-center">
    <input id="checkbox-disabled" type="checkbox" disabled class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2 cursor-not-allowed opacity-50">
    <label for="checkbox-disabled" class="ml-2 text-sm font-medium text-gray-400">Disabled state (unchecked)</label>
  </div>
  
  <!-- Disabled State (Checked) -->
  <div class="flex items-center">
    <input id="checkbox-disabled-checked" type="checkbox" checked disabled class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2 cursor-not-allowed opacity-50">
    <label for="checkbox-disabled-checked" class="ml-2 text-sm font-medium text-gray-400">Disabled state (checked)</label>
  </div>
  
  <!-- Focus State (use Tab key to focus) -->
  <div class="flex items-center">
    <input id="checkbox-focus" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2 focus:ring-offset-2">
    <label for="checkbox-focus" class="ml-2 text-sm font-medium text-gray-700">Focus state (use Tab key)</label>
  </div>
  
  <!-- Error State -->
  <div class="flex items-center">
    <input id="checkbox-error" type="checkbox" class="w-4 h-4 text-red-600 bg-red-50 rounded border-red-500 focus:ring-red-500 focus:ring-2">
    <label for="checkbox-error" class="ml-2 text-sm font-medium text-red-600">Error state</label>
    <span class="ml-1 text-xs text-red-500">Required field</span>
  </div>
  
  <!-- JavaScript for indeterminate state -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('checkbox-indeterminate').indeterminate = true;
    });
  </script>
</div> 
                        

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

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

                            <section class="p-6 max-w-md mx-auto">
  <div class="border border-gray-300 bg-white rounded-md overflow-hidden">

    <button onclick="toggleCollapse(this)" class="w-full p-4 font-semibold text-left flex justify-between items-center hover:bg-gray-50 focus:outline-none">
      <span>How do I create an account?</span>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transform transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
    
    <div class="max-h-0 overflow-hidden transition-all duration-300">
      <div class="p-4 text-sm">
        Click the "Sign Up" button in the top right corner and follow the registration process.
      </div>
    </div>
  </div>
  
  <div class="mt-4 border border-gray-300 bg-white rounded-md overflow-hidden">
    <button onclick="toggleCollapse(this)" class="w-full p-4 font-semibold text-left flex justify-between items-center hover:bg-gray-50 focus:outline-none">
      <span>How can I reset my password?</span>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transform transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
    
    <div class="max-h-0 overflow-hidden transition-all duration-300">
      <div class="p-4 text-sm">
        Click on the "Forgot Password" link on the login page and follow the instructions sent to your email.
      </div>
    </div>
  </div>
</section>

<script>
function toggleCollapse(button) {
  const content = button.nextElementSibling;
  const icon = button.querySelector('svg');
  
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    icon.style.transform = 'rotate(0deg)';
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
    icon.style.transform = 'rotate(180deg)';
  }
}
</script>