JSFiddle - React, Tailwind, and code Playground

by NicosKaralis

HTML

<script src="http://demo.52framework.com/js/modernizr-1.5.min.js"></script>
<link rel="stylesheet" href="http://demo.52framework.com/css/reset.css">
<link rel="stylesheet" href="http://demo.52framework.com/css/css3.css">
<link rel="stylesheet" href="http://demo.52framework.com/css/general.css">
<link rel="stylesheet" href="http://demo.52framework.com/css/grid.css">
<!-- row -->
<div class="row">
    <header>
        <div class="logo col_7 col">52framework</div>
        <nav class="col_9 col">
            <ul>
                <li><a href="#navigation">navigation 1</a></li>
                <li><a href="#navigation">navigation 2</a></li>
                <li class="last"><a href="http://www.enavu.com">enavu network</a></li>
            </ul>
        </nav>
        <div class="clear"></div>
    </header>
</div>


<!-- row -->
<section class="row" id="body">
    <h2 class="width_16 col">Styled Elements</h2>
    <div class="col col_9">
        <article>
            <!-- AddThis Button BEGIN -->
            <div id="social"  class="addthis_toolbox addthis_pill_combo">
                <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
                <a class="addthis_button_facebook_like"></a>
                <a class="addthis_button_tweet" tw:count="horizontal"></a>
            </div>
            <!-- AddThis Button END -->
            
            <h1>This is a title h1</h1>
            <blockquote class="right">
                This is what a blockquote will look like, floated right.<br>Testing a second line inside the blockquote.
            </blockquote>
            <p>Lorem ipsum <a href="#">link one</a> dolor sit amet, consectetur adipiscing elit. Nullam  a purus ac est dapibus feugiat eu eget nulla. Sed molestie feugiat viverra. Pellentesque consectetur, leo in faucibus congue, elit purus bibendum tellus, non tincidunt tortor mauris in sem. Suspendisse sodales metus eget sem suscipit eleifend. Proin porttitor, ante vel egestas pretium, nulla...

CSS

@media screen {}
@media screen and (min-width: 980px) {}
/* ADDTHIS */
.addthis_toolbox.addthis_pill_combo a {float: left;}
a.addthis_button_facebook_like {margin-top: 0}
/* ADDTHIS */


header {padding-top:25px; border-bottom:1px solid #ccc; padding-bottom:20px;}
header .logo {font-size:3.52em;}
header nav ul li {float:left; margin-top:12px;}
header nav ul li a {display:block; padding:5px 15px; border-right:1px solid #eee; font-size:1.52em; font-family:Georgia, "Times New Roman", Times, serif; text-decoration:none;}
header nav ul li a:hover {background-color:#eee; border-right:1px solid #ccc; text-shadow:-1px -1px 0px #fff;}
header nav ul li.last a {border-right:none;}
#css3 div > div {margin:0px 0px 50px 0px; padding:6px; border:1px solid #eee;}
#grid div {text-align:center;  }
#grid div > .col {border-bottom:1px solid #ccc; padding:10px 0px; outline:1px solid #eee;}
h2 {border-bottom:1px dashed #ccc; margin-top:15px;}
.documentation {display:block; background-color:#eee; padding:6px 13px; font-family:Georgia, "Times New Roman", Times, serif; color:#666; text-align:right; text-shadow:-1px -1px 0px #fff;}
footer {text-align:center; color:#666; font-size:0.9em; padding:4px 0px;}

::selection {
    background: red; /* Safari */
    color:#yellow;
}
::-moz-selection {
    background: blue; /* Firefox */
    color:#fff;
}