JSFiddle - React, Tailwind, and code Playground

by Kyle

HTML

<body>
    <div id="header"> I AM A HEADER! </div>
    <div id="contents">
        
        
        <div id="left-bar">
            <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
            </ul>
        </div>
        
        <div id="right-bar">
            <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
            </ul>
        </div>
    </div>
    <div id="center">
            LOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENTLOTS OF CONTENT
        </div>
    <div id="footer">
        FOOTER STUFF IN HERE
    </div>
</body>

CSS

body
{
    height: 100%;
    width: 100%;
    text-align: center;
}

#header
{
    width: 100%;
    height: 100px;
    text-align: center;
    border: 1px dashed #f00;
}

#contents
{
    width: 100%;
    border: 1px dashed #ff0;
}



#left-bar
{
    width: 200px;
    height: 100%;
    float: left;
    border: 1px dashed #f0f;
}

#center
{
    width: 400px;
    margin: 0 auto;
    border: 1px dashed #00f;
}

#right-bar
{
    float: right;
    width: 200px;
    height: 100%;
    border: 1px dashed #f0f;
}

#footer
{
    clear: both;
    width: 100%;
    height: 100px;
    text-align: center;
    border: 1px dashed #0f0;
    position: absolute;
    bottom: 0;
}