JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <div class="container Override">
        <div class="row">
            <div class="col-md-12">header section</div>
        </div>
        <div class="row fill">
            <div class="wrapper">
                <div class="col-md-4">Navigation</div>
                <div class="col-md-8"><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
            </div>
        </div>
    </div>

CSS

*
{
    margin: 0;
    padding: 0;
}

html, body, .Override.container, .Override .col-md-4, .Override .col-md-8
{
    height: 100%;
}

.Override *:before, .Override *:after
{
    display: none;
}

.Override.container:before
{
    content: '';
    display: block;
    float: left;
    height: 100%;
}

.Override .fill
{
    color: #efefef;
    background-color: blue;
    position: relative;
}
    .Override .fill:after
    {
        content: '';
        display: block;
        clear: left;
    }

.Override .wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.Override .col-md-12
{
    background-color: red;
}

.Override .col-md-4
{
    float: left;
    position: static;
    background-color: yellow;
}

.Override .col-md-8
{
    position: static;
    background-color: green;
    overflow: auto;
}