JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<div id="header_vku">
<div class="header_vku-bar"></div>
<div id="header-right">
<div style="position:absolute;right:0;padding-right:15px">Beben Koben</div>
<div style="position:absolute;padding-left:14px;">
Konek with me: 
<a href="https://plus.google.com/102652616884015548682/posts" target="_blank"><img src="http://1.bp.blogspot.com/-xL_oehTah40/Thxt4Y-LYRI/AAAAAAAAAbY/vjH5K-MdVuI/google.png"/></a>
<a href="http://www.facebook.com/beben.koben" target="_blank"><img src="http://1.bp.blogspot.com/_WvACVGW1iPE/TPRrrRd3O1I/AAAAAAAABas/GLWxd6XFukA/facebook.png"/></a>
<a href="http://www.twitter.com/beben-koben" target="_blank"><img src="http://1.bp.blogspot.com/_WvACVGW1iPE/TPRrsBqh4TI/AAAAAAAABaw/qyb8wJrxeFg/twitter.png"/></a>
<a href="http://www.youtube.com/user/beben.koben" target="_blank"><img src="http://1.bp.blogspot.com/_WvACVGW1iPE/TPRrswVhMHI/AAAAAAAABa0/NBvoYSZhfoM/youtube.png"/></a>
    <a href="http://bloggers.com/beben-koben" target="_blank"><img src="http://1.bp.blogspot.com/-TDaMkGAgUfU/TodO5LgxopI/AAAAAAAAAK0/kgZwUQvyzdM/linkedin.png"/></a>
<a href="http://beben-koben.blogspot.com/2009/08/kontak-beben.html" target="_blank"><img src="http://1.bp.blogspot.com/-AnxSICpG908/TodTdbQ5GyI/AAAAAAAAALE/y4EqTEo-238/gmail.png"/></a>
</div></div></div>

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris.<br/><br/>Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum qui cu, nobis efficiendi...

CSS

#header-right {
width: 100%;
padding: 8px 0 9px 0px;
vertical-align :middle;
font-size: 12px;
color: #fff; 
background: #333;
height: 16px; 
position: relative;
}
#header-right img {
height: 18px;
vertical-align: middle;
}
#header_vku {
position: absolute;
width: 99.3%;
top: 0; 
left: 5px;
z-index: 1000;
}
#header_vku:hover {
position: fixed;
top: 0px;
}
.header_vku-bar {
background-color: #222;
height: 5px;
position: fixed;
width: 99.3%;
z-index: 0;
top:0;
cursor: pointer;    
}
*
{
    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-bottom:15px;
}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}