JSFiddle - React, Tailwind, and code Playground

by Sanjito Kurniawan

HTML

<div class="hamburger-menu-wrapper" tabindex="">
    <div class="hamburger-menu"></div>
</div>
<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Contact</a></li>
</ul>

SCSS

body {
    background: #333;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    overflow: hidden;
}
.hamburger-menu-wrapper {
    background: #333;
    width: 30px;
    height: 30px;
    padding: 5px 5px 1px;
    border-radius: 2px;
    cursor: pointer;
    position: absolute;
    top: 30px;
    right: 30px;
}
.hamburger-menu {
    width:30px;
    height:5px;
    background-color:#fff;
    border-radius:5px;
    position:relative;
    &:after, &:before {
        content:'';
        width: 100%;
        height:5px;
        background-color:#fff;
        position:absolute;
        border-radius:5px;
    }
    &:after {
        top:10px;
    }
    &:before {
        top:20px;
    }
}
.nav {
    display: none;
    li {
        float: left;
        display: block;
        padding: 5px 10px;
        background: #666;
        width: 98%;
        clear: left;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        a {
            color: #fff;
            text-decoration: none;
        }
    }
}
/* Magic */
 .hamburger-menu-wrapper:focus {
    display: none;
    
    + .nav {
    display: block;
    }
}

JavaScript

/* Hamburger Menu taken from:
http://www.codesynthesis.co.uk/code-snippets/create-a-hamburger-icon-with-css
*/