JSFiddle - React, Tailwind, and code Playground

by devy indriyani

HTML

<div id="devynav">
<ul>
<li><a href="http://sahabatblogger77.blogspot.com/">Sahabat Blogger 77</a></li>
<li><a href="#">Show 1</a></li>
<li><a href="http://demoshow77.blogspot.com/2014/08/controlling-animation-2.html">Show 2</a></li>
<li><a href="http://demoshow77.blogspot.com/2014/08/controlling-animation-3.html">Show 3</a></li>
<li><a href="http://demoshow77.blogspot.com/2014/08/controlling-animation-4.html">Show 4</a></li>
<li><a href="http://demoshow77.blogspot.com/2014/08/controlling-animation-5.html">Show 5</a></li>
</ul>
</div>

CSS

body {
    margin-top:50px;
    background:#333;
}
#devynav {font:normal 11px Trebuchet MS,Arial,Sans-Serif;margin:0 0 40px;}
#devynav ul {list-style-type:none;margin:-1.4em 0 0 0;padding:0;height:30px;}
#devynav li a {display:inline;margin:2px;float:left;box-shadow:0 2px 0 #FF8C00;-moz-box-shadow:0 2px 0 #FF8C00;-webkit-box-shadow:0 2px 0 #FF8C00;text-align:center;border-radius:50%;}
#devynav li a:link,
#devynav li a:visited {font-weight:bold;color:#222;background-color:#7FFFD4;padding:5px 10px;text-decoration:none;height:20px;margin:-0.1em 0 0 2px;}
#devynav li a:hover {background-color:#EE82EE;height:20px;color:#222;box-shadow:0 2px 0 red;-moz-box-shadow:0 2px 0 red;-webkit-box-shadow:0 2px 0 red;-webkit-border-radius:50%;border-radius:50%;}