JSFiddle - React, Tailwind, and code Playground

HTML

<body class="">
    


			<ul class="tl-menu">
				<li><a href="#" class="icon-logo">Logo</a></li>
				<li><a href="#" class="icon-tag" id="navItem1">Option 1</a></li>
				<li><a href="#" class="icon-chart" id="navItem2">Option 2</a></li>
				<li><a href="#" class="entypo-camera" id="navItem3">Option 3</a></li>
				<li class="tl-current">
          <a href="#" class="icon-download" id="navItem4">Active</a></li>
				<li><a href="#" class="icon-flag" id="navItem5">Option 4</a></li>
				<li><a href="#" class="icon-lamp" id="navItem6">Option 5</a></li>
				<li><a href="#" class="icon-file" id="navItem7">Option 6</a></li>
			</ul>
			<div class="main">
				
        
       
        
       
<!--Slider Nav 1-->
      
       <nav class="slider-menu slider-menu-vertical slider-menu-left" id="slider-menu-s1">
			    <h3>MENU</h3>
         <a href="#"><span class="icon-flag"></span>Item 1</a>
         <a href="#"><span class="icon-flag"></span>Item 2</a>
			    <a href="#"><span class="icon-flag"></span>Item 3</a>
			    <a href="#"><span class="icon-flag"></span>Item 4</a>
			    <a href="#"><span class="icon-flag"></span>Item 5</a>
          <a href="#"><span class="icon-flag"></span>Item 6</a>
          <a href="#"><span class="icon-flag"></span>Item 7</a>
		    </nav>

		</div> <!--End Containter -->
    
   
		<script>
			var menuLeft = document.getElementById( 'slider-menu-s1' ),
				showLeft = document.getElementById( 'showLeft' ),
				body = document.body;

			navItem1.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuLeft, 'slider-menu-open' );
				disableOther( 'navItem1' );
			};
      
			navItem2.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuLeft, 'slider-menu-open' );
				disableOther( 'navItem2' );
			};
      
      navItem3.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuLeft, 'slider-menu-open' );
				disableOther( 'navItem3' );
			};
      
   ...

CSS

@charset "utf-8";

@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome);

/* ---------- ENTYPO ---------- */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  font-weight: normal;
	font-style: normal;
}

/* ---------- FONTAWESOME ---------- */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

body, html { 
  font-size: 100%; 	
  padding: 0; 
  margin: 0;
  text-rendering:optimizeLegibility; }

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    color: #47a3da;

}

a {
	color: #f0f0f0;
	text-decoration: none;
}

a:hover {
	color: #000;
}



.main,
.container > header {
	width: 90%;
	max-width: 70em;
	margin: 0 auto;
	padding: 0 4em 3.125em 6em;
}

.main {
	color: #6d7e97;
	font-weight: 400;
	line-height: 1.5;
	text-align: justify;
}

.main p {
	font-size: 140%;
}

.main h2 {
	font-size: 400%;
	font-weight: 700;
	color: #171d26;
/* 	border-bottom: 1px solid #bbcce0; */ 
	text-align: left;
}

.main h3 {
	font-size: 190%;
	font-weight: 400;
  color: #6d7e97;
/* 	border-bottom: 1px solid #bbcce0; */ 
	text-align: left;
}

.container > header {
	padding: 2.875em 4em 1.875em 6em;
}

.container > header h1 {
	font-size: 2.125em;
	line-height: 1.3;
	margin: 0;
	float: left;
	font-weight: 400;
}

.container > header span {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	padding: 0 0 0.6em 0.1em;
}

.container > header nav {
	float: right;
}

.container > header nav a {
	display: block;
	float: left;
	position: relative;
	width: 2.5em;
	height: 2.5em;
	background:...

JavaScript

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

window.classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

})( window );