JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<a href="" class="menu-link">
    <div class="menu-icon">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
    </div>
    <div class="menu-text">MENU</div>
</a>

CSS

.menu-link{
    display: block;
}
.menu-icon, .menu-text{
    display: block;
    float: left;
}
.menu-icon{
    width: 21px;
}
.menu-text{
    font: normal 18px/16px Arial, sans-serif;
    display: block;
    float: left;
    padding: 0 0 0 6px;
}
.menu-link span{
    display: block;
    border-top: solid 2px #000;
    margin-bottom: 4px;
    transform: rotate(0deg);
    animation: transform 0.5s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, top, bottom, border;
    transition-property: transform, top, bottom;
}
.menu-link:hover span, .menu-link.active span{
    border-top: solid 3px #000;
    margin-bottom: 3px;
}
.menu-link:hover .menu-text, .menu-link.active .menu-text{
    font-weight: bold;
}
.menu-link.active .top, .menu-link.active .bottom{
    transform: rotate(45deg);
    position: relative;
    left: 0px;
}
.menu-link .top{
    top: 0px;
}
.menu-link.active .top{
    top: 6px;
}
.menu-link.active .middle{
    visibility: hidden;
}
.menu-link .bottom{
    bottom: 0px;
}
.menu-link.active .bottom{
    transform: rotate(-45deg);
    bottom: 6px;
}

JavaScript

$("a").click(function(e){
    e.preventDefault();
    $(this).toggleClass("active");
});