JSFiddle - React, Tailwind, and code Playground

by Andrea Biagi

HTML

<input type="checkbox" id="hamburger"/>
<label class="menuicon" for="hamburger">
  <span></span>
</label>
<div class="push240-right">
</div>

SCSS

#hamburger {
  display: none;
}

.menuicon {
 	position:fixed;
	height:3.4em;
	width:3.4em;
	margin-left:0.2em;
	z-index:203;
}

.menuicon  span {
    display: block;
    top: 1.6em;
    width: 3em;
    height:5px;
    left:0.2em;
    background-color: #999;
    position: relative;
    -webkit-transition-duration: 0;
    -moz-transition-duration: 0;
    -ms-transition-duration: 0;
    -o-transition-duration: 0;
    transition-duration: 0;  
    -webkit-transition-delay: .1s;
    -moz-transition-duration: .1s;
    -ms-transition-duration: .1s;
    -o-transition-duration: .1s;
    transition-delay: .1s;
}
    
.menuicon  span::after, .menuicon  span::before {
      display: block;
      content: '';
      position: absolute;
      width: 3em;
      height: 5px;
      background-color: #999;
      -webkit-transition-property: margin, -webkit-transform;
      -webkit-transition-duration: .2s;
       -moz-transition-duration: .2s;
      -ms-transition-duration: .2s;
      -o-transition-duration: .2s;
      transition-duration: .2s;
      -webkit-transition-delay: .2s, 0;
      -moz-transition-duration:.2s, 0;
      -ms-transition-duration: .2s, 0;
      -o-transition-duration: .2s, 0;
      transition-delay: .2s, 0;
}
.menuicon  span::before {
      margin-top: -0.9em;
}
.menuicon  span::after {
      margin-top: 0.9em;
}

#hamburger:checked ~ .push240-right {
  transform: translate(240px);
	-webkit-transform: translate(240px);
	-moz-transform: translate(240px);
	-o-transform: translate(240px);
}

#hamburger:checked ~ .push150-right {
transform: translate(150px);
	-webkit-transform: translate(150px);
	-moz-transform: translate(150px);
	-o-transform: translate(150px);
}

#hamburger:checked ~ .menuicon span{
    background-color: rgba(0,0,0,0);
    }
    
#hamburger:checked ~ .menuicon span::before {
      margin-top: 0px;
      -webkit-transition-delay: 0, .3s;
      -moz-transition-delay: 0, .3s;
      -ms-transition-delay: 0,.3s;
      -o-transition-delay: 0, .3s;
  ...