tailwindcss-hamburger.html

<button class="ham-button flex flex-row items-center">
  <div class="ham-icon relative grid place-content-center w-6 h-5">
    <div 
      class="w-6 h-0.5 bg-black 
      before:content-[''] before:absolute before:w-6 before:h-0.5 before:bg-black before:top-0.5 before:left-0 
      after:content-[''] after:absolute after:w-6 after:h-0.5 after:bg-black after:bottom-0.5 after:left-0 
      [.active_&]:w-0 [.active_&]:before:rotate-45 [.active_&]:before:top-[9px] [.active_&]:after:-rotate-45 [.active_&]:after:bottom-[9px] 
      transition-all duration-300 before:duration-500 after:duration-500"
    ></div>
  </div>
  <span class="ham-title font-bold font-serif h-[15px] leading-none ml-2.5 [.active_&]:hidden">
    Menu
  </span>
</button>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const hamButtons = document.querySelectorAll('.ham-button');
    hamButtons.forEach((button) => {
      const hamIcon = button.querySelector('.ham-icon');
      if (!hamIcon) return;
      button.addEventListener('click', () => {
        hamIcon.classList.toggle('active');
        hamIcon.parentNode.classList.toggle('active');
      });
    });
  });
</script>