JSFiddle - React, Tailwind, and code Playground

by Khalil Zhang

HTML

<div class="page">
    <div class="body">
        <div class="leftCol">
            	<h2>Left Column</h2>

            <p>Left column is 250px by default. It can be extended by several classes to allow for additional layouts.</p>
            <ul>
                <li>.gMail = 160px</li>
                <li>.gCal = 180px</li>
                <li>.yahoo = 240px</li>
                <li>.myYahoo = 300px</li>
            </ul>
        </div>
        <div class="rightCol">
            	<h2>Right Column</h2>

            <p>The right column is by default 300px wide. It can be extended via all the same classes that are available to right column.</p>
            <ul>
                <li>.gMail = 160px</li>
                <li>.gCal = 180px</li>
                <li>.yahoo = 240px</li>
                <li>.myYahoo = 300px</li>
            </ul>
        </div>
        <div class="main">
            	<h2>Main Content</h2>

            <p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of "leftCol" and "rightCol" are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
        </div>
    </div>
</div>

CSS

/* ====== Page Head, Body, and Foot ====== */
 body {
    /*_text-align:center;*/
}
.body {
    overflow:hidden;
    _overflow:visible;
    _zoom:1;
}
.page {
    margin: 0 auto;
    width: 950px;
    /*_text-align:left;*/
}
/* ====== Columns ====== */
 .main {
    overflow: hidden;
    _overflow:visible;
    _zoom:1;
}
.leftCol {
    float:left;
    width:250px;
    _margin-right:-3px;
}
.rightCol {
    float:right;
    width: 300px;
    _margin-left:-3px;
}
/* extend columns to allow for common column widths */
 .gMail {
    width:160px;
}
.gCal {
    width:180px;
}
.yahoo {
    width:240px;
}
.myYahoo {
    width:300px;
}