JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
   <div class="container">
   <nav>
         <input type="checkbox" id="css-toggle-menu" name="css-toggle-menu"> 
         <ul class="main icon-menu">
			<li class="icon-box home"> 
				<i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">Home</h1></a>
				<a href="#">
				      <h2 class="nomobile">Home</h2>
					  
				</a>
			</li>	
			
			<li class="icon-box aboutme"> 
				<i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">About Me</h1></a>
				    <a href="#">
				      <h2 class="nomobile">About Me</h2>
				   </a>
				</li>
				
				
				<li class="icon-box portfolio"> 
        <i class="fa fa-home fa-4x"></i> <a href="#" class="mobile"><h1 class="mobile">Portfolio</h1></a>
				     <a href="#">
				         <h2 class="nomobile">Portfolio</h2>
				     </a>
				</li>
				
				
			    <li class="icon-box blog"> 
          <i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">Blog</h1></a>
			         <a href="#">
				          <h2 class="nomobile">Blog</h2>
				     </a>
				</li>
				
				
			    <li class="icon-box contact"> 
          <i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">Contact</h1></a>
			         <a href="#">
						<h2 class="nomobile">Contact</h2>
				       </a>
				</li>

				
         </ul> 
         <label for="css-toggle-menu" id="css-toggle-menu"></label> 
   </nav>
</div>

CSS

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
@font-face
{
	font-family: Museo500-Regular;
	src: url('../fonts/Museo500-Regular.otf');
}


body {background: #f9f9f9; font-family: Museo500-Regular;}

a{ text-decoration: none; }
h2 {  color: #fff; font-size: 22px; margin: 0 24px;}


/*= ICON BOXES
--------------------------------------------------------*/

ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}

/*.icon-box a {display: block;}*/
i.fa {
  position:absolute;
  pointer-events:none;
  color:white ;
  margin:20px 0 0 20px;
 margin-top: 17px;
    margin-left: -42px !important;
}

.fa {
	margin-left: -44px ;
    margin-top: 15px ;
}


/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box.home h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #E74C3C; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
		border-left: 3px solid #a7382d;
		
}

.icon-box.home a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	
}

.icon-box.aboutme h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #1dd0ad; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
    border-left: 3px solid...