Checkbox Basic

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