JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div class="menu-toggle-btn">
    <span></span>
    <span></span>
    <span></span>
</div>

SCSS

.menu-toggle-btn{
    margin: 15px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    
}
span{
    background: #1d1d1b;
    display: block;
    width: 30px;
    height: 4px;
    border-radius: 5px;
    margin-bottom: 5px;
    -webkit-transition: all 0.5s linear;
    transition: all 0.3s linear;
}
.open span:nth-child(1),
.open span:nth-child(3){
    transform: translate(0px, 13px) rotate(-45deg) scalex(1.3);
    margin: 0;
}
.open span:nth-child(2){
    height: 0;
    margin: 0;
}
.open span:nth-child(3){
    transform: translate(0px, 9px) rotate(45deg) scalex(1.3);
}

JavaScript

$(".menu-toggle-btn").click(function () {
    $(this).toggleClass("open");
});