JSFiddle - React, Tailwind, and code Playground

by Spycho

HTML

<div id="header">
    <p>Test</p>
    <p>Test</p>
</div>

<div id="content">
    <div id="leftbar">
        <p>Test</p>
        <p>Test</p>
    </div>
    
    <div id="rightbar">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>
</div>

<div id="footer">
    <p>Test</p>
    <p>Test</p>
</div>

CSS

body{
    padding: 0;
}

#header{
    background-color:#ccc;
    height: 100px;
    width: 100%;
}

#content{
    position: absolute;
    width: 100%;
    top: 100px;
    bottom: 100px;
}
#leftbar{
    background-color:#eee;
    position: absolute;
    width: 350px;
    height: 100%;
    overflow:auto;
}


#rightbar{
    background-color:#999;
    padding-left:350px;
    height:100%;
    overflow: auto;
}


#footer{
    background-color:#111;
    position: absolute;
    height: 100px;
    width: 100%;
    bottom:0;
}