JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="toggle" onclick="javascript:toggle();return false;">Toggle menu</a>
<ul class="nav">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

CSS

body { margin: 0; }
.toggle { display: none; }
.nav { list-style-type: none; margin: 0; padding: 0; }
.nav li { float: left; margin: 0; padding: 20px; background: #fdd; }
.nav li:nth-child(2n) { background: #dfd; }

@media only screen and (max-width: 599px)
{
    .toggle {
        display: block;
        position: relative;
        z-index: 2;
        padding: 20px;
        background: #eee;
    }
    .nav li {
        display: block;
        float: none;
    }
    .nav {
        display: block;
        position: relative;
        z-index: 1;
        transform: translate3d(0,-100%,0);
		transition: transform 400ms linear;
		-webkit-transform: translate3d(0,-100%,0);
		-webkit-transition: -webkit-transform 400ms linear;
    }
    .nav.active {
        transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
    }
}

JavaScript

function toggle()
{
    $(".nav").toggleClass("active");
}