JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
 
		  <ul class="icon-menu">
				<li class="icon-box home"> 
				    <a href="#">
				      <span class="icon home"></span>
				      <h2>Home</h2>
				    </a>
				</li>	
				
				
				<li class="icon-box aboutme"> 
				    <a href="#">
				      <span class="icon aboutme"></span>
				      <h2>About Me</h2>
				    </a>
				</li>
				
				
				<li class="icon-box portfolio"> 
				     <a href="#">
				        <span class="icon portfolio"></span>
				         <h2>Portfolio</h2>
				     </a>
				</li>
				
				
			    <li class="icon-box blog"> 
			         <a href="#">
				         <span class="icon blog"></span>
				          <h2>Blog</h2>
				     </a>
				</li>
				
				
			    <li class="icon-box contact"> 
			         <a href="#">
				        <span class="icon contact"></span>
						<h2>Contact</h2>
				       </a>
				</li>
				
				
		     
		  </ul>
		  
		
		  
 </div>
 

 
 </div>

CSS

@font-face
{
	font-family: Museo500-Regular;
	src: url('../fonts/Museo500-Regular.otf');
}


body {background: green; 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;}



/*= 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 #0d866e;
}

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


.icon-box.portfolio h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #3498db; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all...