JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Scroller - Demo #3</title>



<!--[if lte IE 9]>

<link rel="stylesheet" type="text/css" href="css/ie.css" />

<![endif]-->

<script src="http://ptica-schastya.besaba.com/scripts/jquery-1.8.2.js"></script>

<style>
@charset "utf-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}
html { background:url(../img/bg2.jpg) no-repeat top center;
 background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: 0 auto; 
	background-color: #191718;
	}
body {
	background: url(../img/right_black.png) repeat-y right top;
	 
	font-family:Verdana, Geneva, sans-serif;
	
    
	color:#FFF; font-size:11px;
	}
p { margin-bottom:20px; line-height:1.4;}
#main { margin:0 auto; display:block; width:100%; max-width:1380px; background: url(../img/left_black.png) repeat-y; min-height:600px; overflow:hidden;}
#header { width:56%; height:120px; background: rgba(0, 0, 0, .8); position: fixed; right:0; padding:0px 50px 0px 40px;}
#logo {width:400px; height:91px; display:block; float: right; margin:10px 20px 0 0; background:url(../img/logo.png) no-repeat;}

#content { display:block; float:right; width:56%; margin-right:30px; margin-top:140px; margin-bottom:60px; 
background: rgba(0, 0, 0, .4); padding:20px 20px 20px 40px;}
#content h1 { font-weight:normal; margin-bottom:20px; color: #6CF;}
li {position: relative;}
.menu {margin-left:30px; margin-top:30px; position: fixed; height:760px; display:block; z-index:10;}
.menu ul {list-style:none;}
.menu ul li span {margin-top:42%; display:block; }	
.menu ul li a {
	color:#FFF; font-size:14px; 
	text-decoration:none; position:relative;
	display:block;
	height:100px;
	width:100px;
	-moz-border-radius:80px;
-webkit-border-radius:80px;
-khtml-border-radius: 80px; ...

CSS

@charset "utf-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}
html { background:url(../img/bg2.jpg) no-repeat top center;
 background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: 0 auto; 
	background-color: #191718;
	}
body {
	background: url(../img/right_black.png) repeat-y right top;
	 
	font-family:Verdana, Geneva, sans-serif;
	
    
	color:#FFF; font-size:11px;
	}
p { margin-bottom:20px; line-height:1.4;}
#main { margin:0 auto; display:block; width:100%; max-width:1380px; background: url(../img/left_black.png) repeat-y; min-height:600px; overflow:hidden;}
#header { width:56%; height:120px; background: rgba(0, 0, 0, .8); position: fixed; right:0; padding:0px 50px 0px 40px;}
#logo {width:400px; height:91px; display:block; float: right; margin:10px 20px 0 0; background:url(../img/logo.png) no-repeat;}

#content { display:block; float:right; width:56%; margin-right:30px; margin-top:140px; margin-bottom:60px; 
background: rgba(0, 0, 0, .4); padding:20px 20px 20px 40px;}
#content h1 { font-weight:normal; margin-bottom:20px; color: #6CF;}

.menu {margin-left:30px; margin-top:30px; position: fixed; height:760px; display:block; z-index:10;}
.menu ul {list-style:none;}
.menu ul li span {margin-top:42%; display:block; }	
.menu ul li a {
	color:#FFF; font-size:14px; 
	text-decoration:none; position:relative;
	display:block;
	height:100px;
	width:100px;
	-moz-border-radius:80px;
-webkit-border-radius:80px;
-khtml-border-radius: 80px;  
border-radius:80px;
behavior: url("PIE/PIE.htc");
border:2px solid #FD7200;  margin-bottom:30px; background: none;
-moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out; cursor:pointer; text-align:center; *display:block;
}

.menu ul li a:hover {  
background:none; color:#FFF;
   -moz-border-radius:100px;
-webkit-border-radius:100px;
-khtml-border-radius: 100px;  
border-radius:100px;
	border:2px solid...