JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div id="nav-icon">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

div#header {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 200;
    width: 97%;
}

a#logo {
    background: url('http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/logo.png');
    width: 148px;
    height: 64px;
    display: inline-block;
    position: absolute;
    left: 0;
    text-indent: -9999px;
}

#nav-icon {
  width: 24px;
  height: 25px;
  position: absolute;
  right: 60px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s cubic-bezier(.77,0,.24,1);
  -moz-transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
  -o-transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
  transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #000;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s cubic-bezier(.77,0,.24,1);
  -moz-transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
  -o-transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
  transition: .5s cubic-bezier(.77,-0.7,.24,1.3);
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
  top: 10px;
}

#nav-icon span:nth-child(4) {
  top: 20px;
}

#nav-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

JavaScript

$(document).ready(function(){
	$('#nav-icon').click(function(){
		$(this).toggleClass('open');
	});
});