JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="container" class="clearfix z-content white">
        <div class="row freegrid">
            <div id="content-lower" class="row">
            
                <section class="sidebar" style="height:300px;background:red;">
                </section>                
                <section class="c8" style="height:500px;background:red;">
                </section>
                <section class="c4" style="height:300px;background:red;">
                </section>
                <section class="c4-a" style="height:180px;background:red;">
                </section>                
                <section class="sidebar" style="height:120px;background:red;">
                </section>
                <section class="c4" style="height:120px;background:red;">
                </section>
                <section class="c4" style="height:120px;background:red;">
                </section>
                <section class="c4" style="height:120px;background:red;">
                </section>
                
            </div>
        </div>
    </div>
</div>

CSS

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }

   
/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Force vertical scrollbar in non-IE
 * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: .75em; line-height: 1.231; } /* 12px base font size */

body, button, input, select, textarea { font-family: Arial, sans-serif; color: #222; }

object:focus { outline: none; -moz-outline-style: none; }

/* 
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */

::-moz-selection { background: #d81300; color: #fff; text-shadow: none;...