JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<div class="burger_click">
  <div class="line1" "line4"></div>
  <div class="line2" "line5"></div>
  <div class="line3" "line6"></div>
</div>
<div class="burger_menu_block" "noneon">
  <ul class="burger_menu">
  <a class="fade" href="#">
    <li class="list_burger">about</li>
    </a>
    <a class="fade" href="#">
    <li class="list_burger">portfolio</li>
    </a>
    <a class="fade" href="#">
    <li class="list_burger">contact</li>
    </a>
  </ul>
</div>

CSS

.burger_menu_block{
  display:flex;
  flex-direction:column;
  align-items:center;
  background-color:orange;
}
.burger_menu{
  list-style:none;
}
.list_burger{
  padding:5px;
}
.burger_click{
 cursor:pointer;
display:flex;
flex-direction:column;
align-items:center;
}
.noneon{
  display:none;
}

.line1{
  transition:all .5s;
  height:5px;
  width:40px;
  background-color:black;
  margin-bottom:5px;
}
.line2{
  transition:all .5s;
    height:5px;
  width:40px;
  background-color:black;
   margin-bottom:5px;
}
.line3{
  transition:all .5s;
    height:5px;
  width:40px;
  background-color:black;
}
.line4{
 transition:all .5s;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.line6{
  transition:all .5s;
  transform: rotate(45deg) translate(-8px, -8px) ;
}
.line5{
    transition:all .5s;
    opacity:0;
}

JavaScript

$(document).ready(function() {
         $('.burger_click').click(function() {
            $(".burger_menu_block").toggleClass("noneon");
            $(".line1").toggleClass("line4");
            $(".line3").toggleClass("line6");
            $(".line2").toggleClass("line5");
         });
         });