JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="menu-toggle" id="menu-toggle">
<div class="mobile-bar">
  <label for="menu-toggle" class="menu-icon">
      <span></span>
    </label>
</div>
<header class="header">
  <nav>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </nav>
</header>
<div class="container">
  main content here
</div>

CSS

/**---- Mobile Bar ----**/

.menu-toggle { display: none; }

.mobile-bar {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 25px;
  width: 100%;
  height: 60px;
  background-color: #333;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/**---- Menu Icon ----**/

.menu-icon {
  display: block;
  position: relative;
  width: 25px;
  height: 100%;
  cursor: pointer;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.menu-icon > span {
  display: block;
  position: absolute;
  top: 55%;
  margin-top: -0.3em;
  width: 100%;
  height: 0.3em;
  border-radius: 1px;
  background-color: #eee;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.menu-icon > span:before, .menu-icon > span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-color: #eee;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.menu-icon > span:before {
  -webkit-transform: translateY(-0.6em);
  transform: translateY(-0.6em);
}

.menu-icon > span:after {
  -webkit-transform: translateY(0.6em);
  transform: translateY(0.6em);
}

/**---- Menu Icon Effects ----**/


.menu-toggle:checked + .mobile-bar .menu-icon {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.menu-toggle:checked + .mobile-bar span:before, .menu-toggle:checked + .mobile-bar span:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.header {
  position: fixed;
  top: 0;
  left: -35%;
  padding-top: 60px;
  width: 70%;
  height:...