JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Responsive Multi-level Flat Menu</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css" >
	
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
    <![endif]-->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>
    <script src="js/menu.js" type="text/javascript"></script> 

</head>
  
 <body>
 
 <div class="mainWrap">
 
 
 
 <a id="touch-menu" class="mobile-menu" href="#"><i class="icon-reorder"></i>Menu</a>
 	
    <nav>
    <ul class="menu">
   <li><a href="#"><i class="icon-home"></i>HOME</a>
  
   </li>
  <li><a  href="#"><i class="icon-user"></i>ABOUT</a></li>
  <li><a  href="#"><i class="icon-camera"></i>PORTFOLIO</a>
  
  </li>
  <li><a  href="#"><i class="icon-bullhorn"></i>BLOG</a></li>
  <li><a  href="#"><i class="icon-envelope-alt"></i>CONTACT</a></li>
  </ul>
  </nav>
  
        
 </div><!--end mainWrap-->
 
</body>
</html>

CSS

/* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);

/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
.italic { font-style: italic }
.aligncenter { display:block; margin:0 auto; }
.alignleft { float:left; margin:10px; }
.alignright { float:right;margin:10px; }
.no-margin{margin:0px;}
.no-bottom{margin-bottom:0px;}
.no-padding{padding:0px;}
.margin-t{margin-top:22px;}
div { position:relative } 
a{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active,a:focus{outline: none;}

img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: 11px;
}

.alignleft, img.alignleft{
display: inline;
    float: left;
    margin-right: 22px;
}

.alignright, img.alignright {
    display: inline;
    float: right;
    margin-left: 22px;
}

.aligncenter, img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}


*{ 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}



html{-webkit-font-smoothing:antialiased;}

a{color:#BA0707;}
a:hover{color:#BA0707;text-decoration:underline;}

body{background:#ffffff url("images/bkg.jpg") no-repeat 0 0;
color:#3E4156;
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
-webkit-font-smoothing:...