JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div id="bt-bar-wrapper">
    <form action="http://beben-koben.blogspot.com/search" method="get" id="bt-bar-search">
        <input type="text" name="q" id="bt-bar-search-box"/>
        <input type="submit" value="Search" id="bt-bar-search-submit"/>
        <div style="clear:both;"></div>
    </form>

    <div id="bt-bar-inner-wrapper">

<div id="bt-text-link"> <b><a href="http://www.bloggerthemes.net/gadgets/navbar-for-blogger" title="NavBar for Blogger">Get This</a></b>
        </div>                    
          <div class="clear"></div>
    </div>
    <div id="bt-bar-sb">
    <ul>    
<li><a id="bt-fb" href="http://facebook.com/beben.koben">Facebook</a></li>
<li><a id="bt-tw" href="http://twitter.com/bebenkoben">Twitter</a></li>
<li><a id="bt-plus" href="https://plus.google.com/102652616884015548682">GooglePlus</a></li>
<li><a id="bt-rss" href="http://beben-koben.blogspot.com/feeds/posts/default">RSSFeed</a></li>
<li><a id="bt-mail" href="[email protected]">E-Mail</a></li>    
</ul>
    </div>
</div>    

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

<div id="ss-box">
<div id="ssl-box">
<div id="icon_facebook">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=113274108709121&href&send=false&layout=box_count&width=50&show_faces=false&action=like&colorscheme=light&font&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:60px; margin-left: 2px;" allowtransparency="true"></iframe>    
</div>    
<div id="icon_googleplus">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>    
</div>                
<div id="icon_twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>        
<div id="icon_digg">
<script type="text/javascript">
    (function() {
    var s = document.createElement('SCRIPT'), s1 =...

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-top:15px;
}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}

* html #ss-box{
position: absolute;
} 
#ss-box{
width: 70px;
background:#B11515;border:1px solid #fff;border-radius:10px;-moz-border-radius:10px;    -webkit-border-radius:10px;position:fixed;left:4%;
top: 20%; 
height:200px;
height:auto;
}
#ss-box div{
padding:6px 6px 4px 5px;
}
#icon_twitter,#icon_digg{
margin-left:-2px;
}
#icon_linkedin{
margin-left:-5px;
}
#sfs{
margin-left:-5px;
}
#ss-get{
bottom: -20px;
clear: both;
color: #666666;
font-size: 9px;
left: 18px;
position: absolute;
text-align: center;
text-decoration: none;
}    

#bt-bar-wrapper  ul {
list-style: none;
margin: 0;
padding: 0;
}
#bt-bar-wrapper {
width: 100%;
height: 40px;
min-width: 965px;
margin: 0;
padding: 0;
font-size: 13px;
font-weight: normal;
line-height: 22px;
background:...