JSFiddle - React, Tailwind, and code Playground

by js_test

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<nav>
<a id="global-nav-mobile-trigger" href="#" data-route="false"><span>Menu</span></a>

</nav>

CSS

body {
    margin:0;
}
nav {
    background: #0d4b83;
    width: 100%;
    height: 108px;
}
#global-nav-mobile-trigger {
    float: left;
    height: 50px;
    position: relative;
    width: 44px;
    z-index: 2;
}
#global-nav-mobile-trigger span, #global-nav-mobile-trigger span:before, #global-nav-mobile-trigger span:after {
    background-color: #fff;
    display: block;
    height: 4px;
    width: 36px;
}
#global-nav-mobile-trigger span {
    margin: 0 auto;
    position: relative;
    top: 23px;
    -webkit-transition-delay: .2s;
    -webkit-transition-duration: 0s;
}
#global-nav-mobile-trigger span {
    color: transparent;
    font: 0/0 a;
    text-shadow: none;
}
#global-nav-mobile-trigger span:before, #global-nav-mobile-trigger span:after {
    content:'';
    position: absolute;
}
#global-nav-mobile-trigger span:before {
    transition: margin 0.2s ease-in-out;
    transition-delay: 0.2s;
    margin-top: -10px;
}
#global-nav-mobile-trigger span:after {
    transition: margin 0.2s ease-in-out;
    transition-delay: 0.2s;
    margin-top: 10px;
}

JavaScript

$("#global-nav-mobile-trigger").on("click", function () {
    console.log("works!");
    $("nav").addClass("open");
});