JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<a href="#" class="toggle-menu toggle">
            <div class="line first"></div>
            <div class="line second"></div>
            <div class="line third"></div>
        </a>

CSS

.toggle-menu{width: 58px; height: 58px; position: absolute; top: 80px; left: 30%; background: #200e20; z-index: 99; }
.toggle-menu .line{width: 28px; height: 3px; display: block; background: #fbf9ec; position: absolute; left: 15px; -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); }
.toggle-menu.toggle:hover .line.first{top: 15px; }
.toggle-menu.toggle:hover .line.third{top: 42px; }
.toggle-menu.toggle .line.first{ top: 20px; }
.toggle-menu.toggle .line.second{ top: 29px; }
.toggle-menu.toggle .line.third{ top: 37px; }

.toggle-menu.close .line.first{-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 50%; -webkit-transition-delay: 110ms; -moz-transition-delay: 110ms; -ms-transition-delay: 110ms; -o-transition-delay: 110ms; transition-delay: 110ms;}
.toggle-menu.close .line.second{-webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); top: 29px; }
.toggle-menu.close .line.third{-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 50%; }

.toggle-menu.close:hover .line.first{-webkit-transform: rotate(-45deg) scale(0.9); -moz-transform: rotate(-45deg) scale(0.9); -ms-transform: rotate(-45deg) scale(0.9); -o-transform: rotate(-45deg) scale(0.9); transform: rotate(-45deg) scale(0.9); -webkit-transition-delay: 110ms; -moz-transition-delay: 110ms; -ms-transition-delay: 110ms; -o-transition-delay: 110ms; transition-delay: 110ms; }
.toggle-menu.close:hover .line.third{-webkit-transform: rotate(-134deg)...

JavaScript

$(function(){

    $('a.toggle-menu').click(function(){
        
        if($(this).hasClass('toggle')){
              $(this).removeClass('toggle').addClass('close');
            return;
        }else
        $(this).removeClass('close').addClass('toggle');
    });

});