JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot; integrity=&quot;sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css&quot; integrity=&quot;sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js&quot; integrity=&quot;sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"></script>
<section id="header">
  <div class="pull-right">
    <a href="#" class="openNav"><i class="fa fa-bars"></i>Menu</a>
    <a href="#" class="closeNav"><i class="fa fa-close"></i>Close</a>
  </div>
  <div class="clearfix"></div>
</section>
<section id="mobile-menu">
  <div class="container">
    <div class="starter-template">
      <ul class="list-unstyled">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a...

CSS

html, body {
  height: 100%;
}
body.mobile-nav-open {
  overflow: hidden;
}
.starter-template {
  text-align: center;
}
section#header {
  height: auto;
  padding: 15px;
  border-bottom: 1px solid #000;
  background: #fff;
  height: 36px;
}
section#header a.openNav,
section#header a.closeNav { 
  font-size: 11px;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
}
section#header a.openNav i,
section#header a.closeNav i {
  display: block;
  font-size: 20px;
  text-align: center;
}
section#header a.closeNav {
  display: none;
}
body.mobile-nav-open section#header a.openNav {
  display: none;
}
body.mobile-nav-open section#header a.closeNav {
  display: block;
}
section#mobile-menu {
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 999;
  display: none;
  overflow-y: scroll;
}
section#mobile-menu li {
  list-style: none;
}
section#mobile-menu li a {
  text-decoration: none;
}

JavaScript

$( document ).ready(function() {
    $("a.openNav").click(function() {
      $("body").addClass('mobile-nav-open');
      $("section#mobile-menu").show();
		});
    $("a.closeNav").click(function() {
      $("body").removeClass('mobile-nav-open');
      $("section#mobile-menu").hide();
		});
});