JSFiddle - React, Tailwind, and code Playground

by orolo

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css">
<div class="yui-gd">
    <div class="yui-u first">
        <div class="box left"></div>
    </div>
    <div class="yui-g">
        <div class="yui-u first">
            <div class="box">Customer Info</div>
            
        </div>
        <div class="yui-u">
            <div class="box">Navigation</div>
            
        </div>
                </div>

        <div class="yui-g">
            
            
            <div class="box clear">
                <div class="yui-g">
                    <div class="yui-u first half"><div class="box"></div></div>
                    <div class="yui-u half"><div class="box"></div></div>
                </div>
            </div>
    </div>
    
</div>

CSS

.box {
    background-color: red;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
}
.left {
    height: 500px;
}

.clear {
    margin-top: 10px;
    top: 10px;
    clear: both;
    
}

.half .box{
    background-color: blue;
}