JSFiddle - React, Tailwind, and code Playground

by bsodmike

HTML

<nav role="navigation" class="mobile-nav">
<div class="burger js-expand-nav opaque" style="touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><div></div><div></div><div></div></div>
</nav>

CSS

nav .burger{position:absolute;top:0;right:0;cursor:pointer;padding:10px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;z-index:1000000;-moz-transform:translate3d(0,-9999em,0);-o-transform:translate3d(0,-9999em,0);-ms-transform:translate3d(0,-9999em,0);-webkit-transform:translate3d(0,-9999em,0);transform:translate3d(0,-9999em,0);-moz-opacity:.01;-khtml-opacity:.01;opacity:.01;filter:alpha(opacity=1);-webkit-transition:opacity .1s ease-in,-webkit-transform 0s ease-in .1s;transition:opacity .1s ease-in,transform 0s ease-in .1s}
nav .burger.opaque{-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-moz-opacity:.99;-khtml-opacity:.99;opacity:.99;filter:alpha(opacity=99);-webkit-transition:opacity .1s ease-in;-moz-transition:opacity .1s ease-in;-ms-transition:opacity .1s ease-in;-o-transition:opacity .1s ease-in;transition:opacity .1s ease-in}
nav .burger.transform{right:0;opacity:1}
nav .burger div{background:#ee2e24;height:3px;width:28px;margin-bottom:4px;-moz-transform:translateZ(0);-o-transform:translateZ(0);-ms-transform:translateZ(0);-webkit-transform:translateZ(0);transform:translateZ(0)}
nav .burger div:first-of-type,nav .burger div:last-of-type{-webkit-transition:-webkit-transform .6s ease .3s,background-color 250ms ease-out;-moz-transition:-moz-transform .6s ease .3s,background-color 250ms ease-out;-ms-transition:-ms-transform .6s ease .3s,background-color 250ms ease-out;-o-transition:-o-transform .6s ease .3s,background-color 250ms ease-out;transition:transform .6s ease .3s,background-color 250ms ease-out}
nav .burger.transform div:first-of-type,nav .burger.transform div:last-of-type{-webkit-transition:-webkit-transform .4s ease .3s,background-color 250ms ease-in;-moz-transition:-moz-transform .4s ease .3s,background-color 250ms...

JavaScript

$(function() {
    SetTimeout(function(){
        console.log('added transform class');
        $('.burger').addClass('transform');
    }, 1000);
});