JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bigslide.js/0.12.0/bigSlide.min.js"></script>
<body>
  <div class="site-overlay"></div>
  <a href="#menu" class="menu-link"> button &#9776;</a>
  <nav id="menu" class="panel" role="navigation">
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">The Ballad of El Goodo</a></li>
          <li><a href="#">Thirteen</a></li>
          <li><a href="#">September Gurls</a></li>
          <li><a href="#">What's Going Ahn</a></li>
      </ul>
  </nav>
</body>

CSS

a.menu-link {
  float: right;
  padding: 20px
}

nav#menu {
  background: lightblue;
  z-index: 100000000000000
}

.site-overlay {
    display: none;
}
.menu-open .site-overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
  
    -webkit-animation: fade 500ms;
    animation: fade 500ms;
}

JavaScript

$(document).ready(function() {
  $('.menu-link').bigSlide({
  	easyClose: true
  });
  $('.menu-link').click(function() {
		$('body').addClass('menu-open');
	});
});