JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>

<div class="dropdown">
    <ul>
        <li><a href="#">Login</a>
            <ul class="children">
                <li><a href="#">Beben</a></li>
                <li><a href="#">Koben</a></li>
                <li><a href="#">si Bloglang</a></li>
                <li><a href="#">anu Ganteng</a></li>
                <li><a href="#">Kalem tea</a></li>
            </ul>
        </li>
    </ul>
</div>

    <p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com">Beben Koben</a></p>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2011/10/menu-maning-menu-lagi.html" title="GO BACK TO ARTICLE"> &laquo; BACK To</a>

    <h2><a href="">Beben Koben</a></h2>
</footer>

CSS

*
{
    margin:0;
    padding:0;
}
body
{
    background:#debe94;
    color:#000;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 1px #FFFFFF;
    padding:10px;
}
a,a:visited
{
    text-decoration:none;
    outline:none;
    color:#a00;
}
a:hover
{
    color:#fff;
}
footer
{
    background:#D3A76F;
    position:fixed;
    width:100%;
    border-top:1px solid #333;
    height:70px;
    bottom:0;
    left:0;
    color:#fff;
    text-shadow:1px 2px 0 #000;
}
footer h2
{
    font:25px/26px Acens;
    font-weight:bold;
    left:70%;
    margin:0px 0 0 150px;
    padding:20px 0;
    position:relative;
    width:400px;
}
footer a.orig,
a.orig:visited
{
-moz-box-shadow:0px 0px 20px #000;
-webkit-box-shadow:0px 0px 20px #000;
box-shadow:0px 0px 20px #000;    
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
    border:none;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred
{
    padding:10px;
}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:15px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
.dropdown {
height: 40px;
}
.dropdown ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.dropdown ul li {
display: block;
float: right;
position: relative;
}
.dropdown ul li a {
text-decoration: none;
display: block;
background: #e3e3e3;
border-bottom: 1px solid #ccc;
color: #444;
display: block;
float: left;
font-weight: bold;
padding: 10px 16px;
padding: 11px 16px\9; /* IE9 and below */  
*padding: 10px 16px; /* IE7 and below */
}
.dropdown ul li a:hover {
background: #d1e4f8;
color: #000;
text-decoration: none;
}
.dropdown ul li:hover ul.children {
display: block;
position: absolute;
top: 36px;
right: 0;
}
ul.children {
background: #8f714d;
display: none;
margin: 0;
width: 184px;
}
ul.children li {
margin: 0;
}
ul.children a {
border: none;
width:...