JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<div id="slide-nav" class="navbar" role="navigation">
		<div class="container relative">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
				</button>
				<h3>Menu</h3>
		    </div><!-- .navbar-header -->
			<div class="collapse navbar-collapse pull-left">
			<div id="slidemenu">
				<ul class="nav navbar-nav">
					<li class="dropdown">
						<a class="dropdown-toggle" data-toggle="dropdown" href="#">Cards <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Birthdays</a></li>
							<li><a href="#">Christmas</a></li>
							<li><a href="#">Halloween</a></li>
							<li><a href="#">Engagement</a></li>
						</ul><!-- dropdown-menu -->
					</li><!-- .dropdown -->
					<li><a href="#about">Best Sellers</a></li>
					<li><a href="#contact">New Arrivals</a></li>
					<li><a href="#contact">Other Stuff</a></li>
					<li><a href="#contact">Blog</a></li>
				</ul>
	        </div><!-- .nav-collapse -->
		</div><!-- .container -->
		<div id="navbar-height-col"></div></div><!-- #slide-menu -->
	</div>

CSS

/* CORE */

body {
	font-family: "Cabin",Arial,sans-serif;
}

/* NAV */

.navbar {
	background-color: #383637;
	position: relative;
	z-index: 2;
	border-radius: 0;
	margin-bottom: 0;
}
.navbar li a {
    color: #FFFFFF;
    font-family: 'Cabin',sans-serif,Arial;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.top {
    position: relative;
}
.relative {
	position: relative;
}
body.slide-active #slidemenu .nav > li {
    background-color: #14BFF3;
    clear: both;
    display: block;
    float: left;
    position: relative;
    width: 100%;
}
#slidemenu .nav > li + li {
	border-top: 1px solid #383637;
}
.container.relative h3 {
    color: #FFFFFF;
    display: none;
    float: left;
    font-size: 22px;
    margin: 14px 0 0 10px;
    text-transform: uppercase;
}
.collapse {
	display: block;
}
.dropdown-menu {
	background-color: #14bff4;
	border: none;
}
.dropdown-menu li {
	float: left;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #14BFF4;
}

/* OFF-CANVAS NAV */

/* adjust body when menu is open */
body.slide-active {
    overflow-x: hidden
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
    margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
    position: relative;
    left: 0;
}
#page-content.slide-active {
    padding-top: 0
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: left;
    margin: 0;
    width: 30px;
    height: 40px;
    padding: 6px 0 0 0;
    border: 0;
    background: transparent;
    z-index: 9999;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
    width: 100%;
    display: block;
    height: 3px;
    margin: 5px 0 0 0;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
    background:...

JavaScript

$(document).ready(function () {


    //stick in the fixed 100% height behind the navbar but don't wrap it
    $('#slide-nav.navbar .container').append($('<div id="navbar-height-col"></div>'));

    // Enter your ids or classes
    var toggler = '.navbar-toggle';
    var pagewrapper = '#page-content';
    var navigationwrapper = '.navbar-header';
    var menuwidth = '100%'; // the menu inside the slide menu itself
    var slidewidth = '80%';
    var menuneg = '-100%';
    var slideneg = '-80%';


    $("#slide-nav").on("click", toggler, function (e) {

        var selected = $(this).hasClass('slide-active');

        $('#slidemenu').stop().animate({
            left: selected ? menuneg : '0px'
        });

        $('#navbar-height-col').stop().animate({
            left: selected ? slideneg : '0px'
        });

        $(pagewrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });

        $(navigationwrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });


        $(this).toggleClass('slide-active', !selected);
        $('#slidemenu').toggleClass('slide-active');


        $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');


    });


    var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';


    $(window).on("resize", function () {

        if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
            $(selected).removeClass('slide-active');
        }


    });




});