JSFiddle - React, Tailwind, and code Playground

by Terry Bone

HTML

<body>
    <header id="top" class="teal-top">
        <div class="container cf center">
            <div class="col span_3_of_12">	<a href="#" class="gigantic">My Blog</a>

                <p class="slogan">Just another <b><a href="#">blog</a></b>

                </p>
            </div>
            <div class="col no-top span_5_of_12">
                <nav id="nav">
                    <ul class="nav h ul cf teal-hov">
                        <li><a href="#">Home</a>

                        </li>
                        <li><a href="#">Portfolio</a>

                        </li>
                        <li><a href="#">Contact</a>

                        </li>
                        <li><a href="#">About</a>

                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col span_4_of_12">
                <form action="?" method="get">
                    <label for="search" class="search-btn">Search on this website</label>
                    <input type="search" id="search">
                    <input type="submit" id="search_submit" value="Search">
                </form>
            </div>
        </div>
    </header>
    <aside id="categories">
        	<h2>Categories</h2>

        <ul class="side nav no-margin">
            <li><a href="#">Category 1</a>

            </li>
            <li><a href="#">Category 2</a>

            </li>
            <li><a href="#">Category 3</a>

            </li>
        </ul>
    </aside>
    <div class="container center">
        <section id="popular-posts">
            	<h2 class="line-bottom">Popular Posts</h2>

            <div class="cf">
                <div class="col span_4_of_12">
                    <article>
                        	<h2>Far far away</h2>

                        <p class="small italic">Published
                            <time datetime="2013-12-26 pubdate">December 26, 2013</time>by dummytext</p>
                        <img...

CSS

/*================= Basic Styles =================*/
 html {
     overflow-x: hidden;
     overflow-y: scroll;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     font-size: 100%;
     /* Included in normalize.css
 	-webkit-text-size-adjust: 100%;
 	-ms-text-side-adjust: 100%;
 	 */
 }
 body {
     padding: 0;
     margin: 0;
     font: 13px/21px Helvetica, Arial, sans-serif;
 }
 img {
     max-width: 100%;
     height: auto;
 }
 section {
     margin-bottom: 2em;
 }
 input {
     margin: 0;
 }
 a:link {
     text-decoration: none;
     color: inherit;
 }
 a:active, a:hover {
     outline: 0;
 }
 a:focus {
     outline: thin dotted;
 }
 h1, h2, h3, h4, h5, h6 {
     margin: 0.5em 0;
 }
 ::selection {
     background-color: #99CCFF;
     background-color: #A5CFFA;
     color: #000000;
     text-shadow: none;
 }
 ::-moz-selection {
     background-color: #99CCFF;
     background-color: #A5CFFA;
     color: #000000;
     text-shadow: none;
 }
 ::-webkit-selection {
     background-color: #99CCFF;
     background-color: #A5CFFA;
     color: #000000;
     text-shadow: none;
 }
 article header h1 {
     font-family: Georgia, Times, 'Times New Roman', serif;
 }
 article header {
     border-bottom: 1px solid #DCDCDC;
 }
 .left {
     float: left;
 }
 .right {
     float: right;
 }
 .line-bottom {
     border-bottom: 1px solid #DCDCDC;
 }
 .button {
     display: inline-block;
     border-radius: .3125em;
     -webkit-border-radius: .3125em;
     -moz-border-radius: .3125em;
     text-decoration: none;
     color: inherit;
     padding: .35em .65em;
 }
 .blue.button {
     border: 1px solid #0066FF;
     color: #E8E8E8;
     background-color: #41b7d8;
 }
 /*================= Typography =================*/
 .oblique {
     font-style: oblique;
 }
 .gigantic {
     font-size: 200%;
     text-shadow: 2px 2px 5px #333333;
 }
 .small {
     font-size: 90%;
 }
 .narrowsans {
     font: 16px/21px Frutiger, ‘Frutiger Linotype’, Univers, Calibri, ‘Gill Sans’, ‘Gill Sans MT’,...