JSFiddle - React, Tailwind, and code Playground

by darkdemon666

HTML

<div id="divContainer">
    <div id="divHeader">
        Header
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
            Left Content Area<br/>
            Can be used to display navigation/ RSS Feeds
        </div>
        <div id="divContentRight">
            Main Content Area<br/>
            All of your content go here
        </div>
    </div>
    <div id="divFooter">
        Footer
    </div>
</div>

CSS

*{
        font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
div{
    padding:2px;
}
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color: #ccc;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
    background-color:#DCDCBA;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
    background-color:#A6D2FF;

}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: #ccc;

}