Tailwind responsive header menu example

This basic example shows you how we create a responsive header menu in tailwind css. 

First, the html:

<header role="banner" class="px-0 mx-0 container mx-auto pt-6 mb-6 flex flex-col justify-center">
 <div class="flex flex-wrap lg:px-4">
  <div class="my-2 pr-2 w-5/12 lg:w-3/12 overflow-hidden">
   <div class="ml-4 lg:ml-0">
    <a href="/">
     <img class="md:pl-6" src="https://pngimage.net/wp-content/uploads/2019/05/fake-logo-png-.png" />
    </a>
   </div>
  </div>
  <div class="w-5/12 lg:hidden"></div>
  <div class="my-2 px-2 w-2/12 lg:hidden flex flex-row">
   <div class="self-center block mr-4 w-full">
    <button id="nav-toggle" class="text-first" aria-haspopup="true" aria-expanded="false" aria-controls="menu" aria-label="Navigation">
     <img class="open w-1/2 align-end" src="https://www.flaticon.com/svg/static/icons/svg/1828/1828859.svg" />
     <img class="close hidden w-1/2" src="https://www.flaticon.com/svg/static/icons/svg/61/61155.svg" />
    </button>
   </div>
  </div>
  <div class="lg:w-1/12 hidden lg:block"></div>
  <div class="w-full lg:w-8/12 hidden lg:block bg-black lg:bg-white mt-4 lg:mt-0 lg:text-right" id="nav-content" aria-expanded="false">
   <div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
    <div>
     <nav role="navigation" aria-labelledby="block-main-menu" id="block-main">
      <ul class="list-reset lg:flex justify-end flex-1 items-center">
       <li class="inline-block w-full text-xl lg:text-base font-semibold no-underline py-2 lg:px-4">
        <a href="/" class="text-white lg:text-black no-underline is-active">Home</a>
       </li>
       <li class="inline-block w-full text-xl lg:text-base font-semibold no-underline py-2 lg:px-4">
        <a href="/page-2" class="text-white lg:text-black no-underline">Page 2</a>
       </li>
       <li class="inline-block w-full text-xl lg:text-base font-semibold no-underline py-2 lg:px-4">
        <a href="/page-2" class="text-white lg:text-black no-underline is-active">Page 3</a>
       </li>
      </ul>
     </nav>
    </div>
   </div>
  </div>
 </div>
</header>

Second, add this little CSS:

/** Mobile nav **/
#nav-content[aria-expanded="true"] {
  display: block;
}
#nav-toggle[aria-expanded="true"] .close {
  display:inline-block;
}
#nav-toggle[aria-expanded="true"] .open {
  display:none;
}

To make the hamburger work, a little jquery is needed:

// Mobile filter collapse
var isMenuOpen = false;
$('#nav-toggle').click(function() {
  isMenuOpen = !isMenuOpen;
  $(this).attr('aria-expanded', isMenuOpen);
  $('#nav-content').attr('aria-expanded', isMenuOpen);
});

There you go. Preview it on https://tailwind.run/new to see it in action!