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

/* Configuration Parameters */
$lineWidth: 5px;
$lineLength: 25px;
$baseMargin: 8px;
$animationDuration: .2s;

html {
  background: #CCC;
}

html,body {
  margin: 0; 
  padding: 0; 
  height: 100%
}

#hamburger {
  display: none;
}

.push240-right {
  display: block;
  background-color: #AAA;
  width: 0px;
  height: 100%;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.menuicon {
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  cursor: pointer;
  height: 21px;
  width: 25px;
  span {
    display: block;
    top: 8px;
    width: 25px;
    height:5px;
    background-color: #000;
    position: relative;
    -webkit-transition-duration: 0;
    -moz-transition-duration: 0;
    -ms-transition-duration: 0;
    -o-transition-duration: 0;
    transition-duration: 0;  
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    &::after, &::before {
      display: block;
      content: '';
      position: absolute;
      width: 25px;
      height: 5px;
      background-color: #000;
      -webkit-transition-property: margin, -webkit-transform;
      -webkit-transition-duration: .2s;
      transition-duration: .2s;
      -webkit-transition-delay: .2s, 0;
      transition-delay: .2s, 0;
    }
    &::before {
      margin-top: -8px;
    }
    &::after {
      margin-top: 8px;
    }
  }
}

#hamburger:checked ~ .push240-right {
  width: 350px;
}

#hamburger:checked ~ .menuicon {
  span {
    background-color: rgba(0,0,0,0);
    &::before, &::after {
      margin-top: 0px;
      -webkit-transition-delay: 0, .2s;
      -moz-transition-delay: 0, .2s;
      -ms-transition-delay: 0,.2s;
      -o-transition-delay: 0, .2s;
      transition-delay: 0, .2s;
    }
    &::before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    &::after {
     ...