JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<input hidden type='checkbox' id='hamburger'>
<label for='hamburger'>
  <span></span>
  <span></span>
  <span></span>
</label>

SCSS

label {
  position: absolute;
  top: 20px;
  right: 20px;
  
  span {
    position: relative;
    display: block;
    width: 50px;
    height: 8px;
    background: #0F0;
    border-radius: 2px;
    margin-bottom: 5px;
    transition: transform 0.4s ease-in-out, height 0.4s ease-in-out;
  }
}

input {
  &:checked+label {
    span {
      transition: transform 0.4s ease-in-out, height 0s ease-in-out;
      
      &:nth-child(1) {
        transform: rotate(-45deg);
        top: 12px;
      }
      &:nth-child(2) {
        transform: scale(0);
        height: 0;
      }
      &:nth-child(3) {
        transform: rotate(45deg);
      }
    }
  }
}