JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
	<div class="row">
		<div class="col-xs-12" id="header">
			<div class="u-pull-left">
				<a href="#" class="nav-toggle">
					<div class="icon-menu">
						<span class="line line-1"></span>
						<span class="line line-2"></span>
						<span class="line line-3"></span>
					</div>
				</a>
				<div class="heading">
					Recent 
				</div>
			</div><!-- .u-pull-left -->
			<nav class="nav is-fixed" role="navigation">
				<div class="nav-container">
        
        
					<ul class="nav-menu menu">
						<li class="menu-item"> <a href="index.html" class="menu-link">Home</a> </li>
						<li class="menu-item"> <a href="sf.html" class="menu-link">Stock Futures</a> </li>
						<li class="menu-item"> <a href="if.html" class="menu-link">Index Futures</a></li>
						<li class="menu-item"> <a href="so.html" class="menu-link">Stock Options</a> </li>
						<li class="menu-item"> <a href="io.html" class="menu-link">Index Options</a> </li>
						<li class="menu-item"> <a href="mb.html" class="menu-link">Multibagger</a> </li>
						<li class="menu-item"> <a href="about.html" class="menu-link">About Us</a> </li>
						<li class="menu-item"> <a href="contact.html" class="menu-link">Contact Us</a> </li>
					</ul>
				</div><!-- .nav-container -->
				<div class="pull-right quick" >
					<span id="notices"><i class="fa fa-ellipsis-v"></i></span>
				</div>
				<div class="quick-nav pull-right">
					<a href="">Successful Calls</a>
					<br />
					<a href="">New Calls</a>
				</div>
			</nav>
		</div><!-- #header -->
	</div><!-- .row -->
</div><!-- .container -->

CSS

/* Empty. Add your own CSS if you like */
@font-face {
  font-family: 'RalewayRegular';
  src: url('fonts/Raleway-Regular.ttf')  format('truetype');
}

#header{
	background-color: #006699;
	height: 50px; 
	color: #FFFFFF;
	padding: 15px;
}

.quick-nav{
	display:none;
	float:right;
}

#header .quick{
	margin-top: -20px;
	padding-left:15px;
	cursor: pointer;
}

#header .quick a{
	color: #FFFFFF !important;
}

#header .quick i{
  font-size: 1.2em;
}

.title{
  	font-family: 'RalewayRegular';
	text-align:center;
	margin-bottom: 1px;
	margin-top: 5px;
    height: auto;
    min-height: 30px;
    text-transform: uppercase;
}


.mar0{
	margin-bottom:0px;
}


.box-first{
	padding-right: 4px;
}

.box-child{
	padding-left: 4px;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
	border-top: 4px Solid #fff !important;
	background-color:#dedede; 
	color:#006699;
	font-weight:bold;

}

.table>tr{
	border-radius:5px !important;
}

.heading{
	display:inline;margin-left:10px; font-weight: bold;
}


/**
* Nav container
* 1. Ensure this slides in below parent
* 2. Hide by default
* 3. Smoother scrolling experience on iOS
*/

.nav-container {
  position: absolute;
  top: 50px; /* 1 */
  z-index: 9999;
  overflow-y: auto;
  visibility: hidden; /* 2 */
  width: 100%;
  height: auto;
  min-height: 150px;
  margin-left: -15px;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%); /* 2 */
  -webkit-overflow-scrolling: touch; /* 3 */
}

/* 1. Show when `.is-visible` class is added */

.nav-container.is-visible {
  visibility: visible; /* 1 */
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0); /* 1 */
}

/* Nav toggle */

.nav-toggle {
  display: inline-block;
  border: 0;
}

/* Nav...

JavaScript

var html = $('html, body'),
    navContainer = $('.nav-container'),
    navToggle = $('.nav-toggle'),
    navDropdownToggle = $('.has-dropdown');

navToggle.on('click', function(e) {
  var $this = $(this);
  e.preventDefault();
  e.stopPropagation();
  $this.toggleClass('is-active');
  navContainer.toggleClass('is-visible');
  html.toggleClass('nav-open');
});

navDropdownToggle.on('click', '*', function(e) {
  e.stopPropagation();
});

$('body').click(function(){
		navToggle.toggleClass('is-active');
    navContainer.toggleClass('is-visible');
  	html.toggleClass('nav-open');
});