JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<!-- article: http://simblestudios.com/blog/design/a-bunch-of-hamburgers.html -->
<div id="menu-icon">
    <hr class="menu-line menu-top" />
    <hr class="menu-line menu-center" />
    <hr class="menu-line menu-bottom" />
</div>

CSS

body {
    background: #000;
}
#menu-icon {
    width: 34px;
    height: 34px;
    overflow: hidden;
}
#menu-icon:hover {
    cursor: hand;
}
#menu-icon .menu-line {
    border: none;
    border-bottom: 5px solid #fff;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
    transform-origin: left center;
    transition-property: all;
    transition-duration: 0.3s;
}
#menu-icon.menu_shown .menu-top {
    transform: rotate(45deg);
}
#menu-icon.menu_shown .menu-bottom {
    transform: rotate(-45deg);
}
#menu-icon.menu_shown .menu-center {
    opacity: 0;
}
/*#menu-icon:hover .menu-bar-1 {
    transform: rotate(45deg);
    transform-origin: right center;   
}

#menu-icon:hover .menu-bar-2 {
    display: none;   
}

#menu-icon:hover .menu-bar-3 {
   
}*/

JavaScript

$(document).ready(function() {
    $('#menu-icon').click(function() {
        $(this).toggleClass('menu_shown');
    });
});