JSFiddle - React, Tailwind, and code Playground

by hutber

HTML

<shell class="menuout"><menu>Hutber</menu><header class="loggedin"><menubtn>MOVE Button</menubtn></header></shell>

CSS

.menuOpen menu {
    left: 0;
}
menu {
    background-color: #7CBEBB;
    background-image: -moz-linear-gradient(left center , #468E8A 0%, #3E7D7A 100%);
    background-size: 100% auto;
    height: 100%;
    left: -85%;
    overflow-x: hidden;
    position: fixed;
    transition-duration: 5s;
    width: 85%;
    z-index: 2;
}

header.loggedin {
    background-image: linear-gradient(#7CBEBB, #75B4B1);
    background-size: 100% auto;
    border-bottom: 1px solid #60ACA8;
}
header {
    overflow: hidden;
    padding: 8px 0;
}

.menuOpen shell {
    left: 85%;
    position: relative;
}
shell {
    left: 0;
    transition-duration: 5s;
}

JavaScript

$('body').click(function(){
    
    $(this).toggleClass('menuOpen');
});