JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slide-out">
        <p class="close">Close</p>
        <div class="nav"></div>
    </div>
    <div class="container">
        <p class="open">Menu</p>
    </div>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}
.container {
    width: 100%;
    height: 100%;
}
.slide-out {
    position: fixed;
    background: #202024 ;
    left: -285px;  /* start off behind the scenes */
    height: 100%;
    width: 285px;
}

JavaScript

var main = function() {
          /* Push the body and the nav over by 285px over */
          $('.open').click(function() {
            $('.slide-out').animate({
              left: "0px"
            }, 200);

            $('body').animate({
              left: "285px"
            }, 200);
          });

          /* Then push them back */
          $('.close').click(function() {
            $('.slide-out').animate({
              left: "-285px"
            }, 200);

            $('body').animate({
              left: "0px"
            }, 200);
          });
        };
$(document).ready(main);