JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div id="extruder2">
    <div id="rightfloat"><h1>Hello World</h1></div>
<div id="navigation">
    <ul class="top-level">
        <li><a href="#"><img src="http://www.aidoweb.com/images/upload/screenshots/jquery.png">Jquery Porting Tutorials</a></li>
        <li><a href="#"><img src="http://www.aidoweb.com/images/upload/screenshots/jquery.png">My best comics</a></li>
        <li><a href="http://google.com/"><img src="http://www.communitymx.com/images/largejsicon.gif">Video Tutorials for PHP & MySQL</a></li>
        <li><a href="#"><img src="http://www.sitepoint.com/wp-content/uploads/1/files/2011/11/607-jquery-mobile-50x50.png">Ilayaraja Songs in Tamil</a></li>
     
    </ul>
</div>

            </div>

CSS

@font-face {
    font-family: 'blok-regular';
    src: url('http://d2o0t5hpnwv4c1.cloudfront.net/569_fontface/fontface/type/Blokletters-Potlood.eot');
    src: local('Blokletters Potlood Potlood'), 
         local('Blokletters-Potlood'), 
         url('http://d2o0t5hpnwv4c1.cloudfront.net/569_fontface/fontface/type/Blokletters-Potlood.ttf') format('truetype');
}

@font-face {
    font-family: 'blok-italic';
    src: url('http://d2o0t5hpnwv4c1.cloudfront.net/569_fontface/fontface/type/Blokletters-Balpen.eot');
    src: local('Blokletters Balpen Balpen'), 
         local('Blokletters-Balpen'), 
         url('type/Blokletters-Balpen.ttf') format('truetype');
}

@font-face {
    font-family: 'blok-heavy';
    src: url('http://d2o0t5hpnwv4c1.cloudfront.net/569_fontface/fontface/type/Blokletters-Viltstift.eot');
    src: local('Blokletters Viltstift Viltstift'), 
         local('Blokletters-Viltstift'), 
         url('http://d2o0t5hpnwv4c1.cloudfront.net/569_fontface/fontface/type/Blokletters-Viltstift.ttf') format('truetype');
}

h1 { font-family: blok-heavy, helvetica, arial; }

#navigation {font-size:0.75em; width:350px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;} 
#rightfloat {
    float:right;
    margin-top:30px;
    margin-right:30px;
    font-size:30px;
    color:#ffffff;
}
ul.top-level {background:#666;}
ul.top-level li {
 border-bottom: #000 solid;
 border-top: #000 solid;
 border-width: .3px;
}

#navigation a {
 color: #fff;
 cursor: pointer;
 display:block;
 height:55px;
padding-top:5px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
#navigation a:hover{
 text-decoration:underline;
}

#navigation li:hover {
 background: #f90;
 position: relative;
}

#extruder2 {
 background:#000000;
height:450px;    
}