JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<body class="antialiased bg-gray-200">
  <header class="lg:px-16 px-6 bg-white flex flex-wrap items-center lg:py-0 py-2 shadow">
    <div class="flex-1 flex justify-between items-center">
      <a href="#">
        <img src="https://i.ibb.co/nz1S1c2/logo.png" class="h-12" alt="Logo">
      </a>
    </div>
 
    <label for="menu-toggle" class="cursor-pointer lg:hidden block"><svg class="fill-current text-gray-900" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path></svg></label>
    <input class="hidden" type="checkbox" id="menu-toggle" />
 
    <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
      <nav>
        <ul class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0">
          <li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-indigo-400" href="#">Features</a></li>
          <li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-indigo-400" href="#">Pricing</a></li>
          <li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-indigo-400" href="#">Documentation</a></li>
          <li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-indigo-400 lg:mb-0 mb-2" href="#">Support</a></li>
        </ul>
      </nav>
      <a href="#" class="lg:ml-4 flex items-center justify-start lg:mb-0 mb-4 cursor-pointer">
        <img class="rounded-full w-10 h-10 border-2 border-transparent hover:border-indigo-400" src="https://blogcdn1.secureserver.net/wp-content/uploads/2014/06/create-a-gravatar-beard.png" alt="Andy Leverenz">
      </a>
    </div>
  </header>
 
  <!-- INFO -->
  <div class="px-4">
    <div class="max-w-xl bg-white rounded-lg mx-auto my-12 p-12">
      <h1 class="text-2xl font-medium...

CSS

#menu-toggle:checked + #menu {
  display: block;
}