JSFiddle - React, Tailwind, and code Playground

by ASHISH ROX

HTML

<link rel="stylesheet" href="https://simple-cursor.googlecode.com/svn/trunk/awesome.css">
<link rel="stylesheet" href="https://simple-cursor.googlecode.com/svn/trunk/awesome.css">
<div id="hidden-menu" class="active">
<ul>
<li>
<a class="home" href="/" title="Home">
Home
</a>
</li>
<li>
<a class="service" href="#" title="Services ">
 Services
</a>
</li>
<li>
<a class="color-pic" href="http://www.fullblogdesign.com/p/kode-warna-html_02.html" title="Color Picker">
 Color Picker
</a>
</li>
<li>
<a class="About-US" href="#" title=" About US">
 About US
</a>
</li>
<li>
<a class="team" href="#" title="Team">
 Team
</a>
</li>
<li>
<a class="list-font" href="#" title="List-Awesome ">
List-Awesome
</a>
</li>
<li>
<a class="contack" href="http://www.fullblogdesign.com/p/kontack-form.html" title=" Contacts">
 Contacts
</a>
</li>
</ul>
<a class="nav-tombol" href="#" title="Open-List ">
</a>
<div id="description">
<div class="logo"></div><br/><br/><br/><br/>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-person" data-layout="landscape" data-href="https://plus.google.com/109648847911535372958"></div>
</div>
<div class="socialnavigation">
<a class="facebook" href="#" title="facebook "> 
</a>
<a class="twitter" href="#" title="twitter ">
</a>
<a class="google" href="#" title="google ">
</a>
<a class="github1" href="#" title="github ">
</a>
<a class="youtube2" href="#" title="youtube ">
</a>
<a class="flickr3" href="#" title="flickr ">
</a>
</div>
</div>
<

CSS

#hidden-menu {
	width: 300px;
	height: 100%;
	position: fixed;
	right:0 ;
	top: 0;
	z-index: 10000;
	background:#aaa;
			transition: all 0.5s ease;
}

#hidden-menu.active {
	right:-300px;
	background: #fff;
}
#hidden-menu ul{list-style:none}
#hidden-menu ul li a {
	font-family: "Lato", Helvetica, Arial, sans-serif !important;
	font-weight: 100 !important;
	letter-spacing: 0.50em !important;  
}
.nav-tombol {
	position: absolute;
	top: 0px;
	left: -30px;
	width: 30px;
	height: 30px;
	background: #8a7972;
	text-align: center;
	line-height: 30px;
}
.nav-tombol:before{content:"\f045 ";font-family:fontAwesome;color:#fff}
.nav-tombol:hover {
	background: #de4062;
}
#hidden-menu ul li a {
	display: block;
	padding: 16px 16px 16px 0;
	outline: none;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
}

#hidden-menu li a i {
	font-size: 17px;
	margin-right: 20px;
	color: #555555;
}

#hidden-menu ul li a:hover,
#hidden-menu ul li.current a {
	background: #8a7972;
	box-shadow: inset 0 -1px rgba(0,0,0,0);
	color: #333;
	text-decoration: none;
	border-right: 5px solid #de4062;
}

#hidden-menu ul li a:hover i,
#hidden-menu ul li.current a i {
	color: #222;
	        transition: all 0.6s ease-in-out;
}

/* and Main Navigation */
/* =========================================== */
/* Social Media */

.socialnavigation{
	position: absolute;
	bottom: 0;
	left: 0;
}

.socialnavigation a {
	position: relative;
	width: 50px;
	height: 50px;
	display: inline-block;
	float: left;
	background: #8a7972;
	text-align: center;
	line-height: 50px;
	        transition: all 0.6s ease-in-out;
}
.socialnavigation a i {
	font-size: 17px;
	color:...