JSFiddle - React, Tailwind, and code Playground

by grc4

HTML

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      
    </head>
    <body>
        <div id="mainContainer">
            <div id="headerContainer">
                headerContainer
            </div>
            <div id="middleContainer">
                <div id="leftSection">
                    <div style="margin-top: 30px;">leftSection</div>
                </div>
                <div id="middleSection">
                    <div style="margin-top: 30px;">middleSection</div>
                </div>
                <div id="rightSection">
                    <div style="margin-top: 30px;">rightSection</div>
                </div>
            </div>
            <div id="footerContainer">
                footerContainer
            </div>
        </div>
    </body>
    </html>

CSS

body {
    margin: 0;
    height:100%;
}
#mainContainer {
    position: absolute;
    right: 4%;
    left: 4%;
    height: 100%;
}
#headerContainer {
    width: 100%;
    position: relative;
    background: #323232;
    color: white;
    height: 30px;
}
#middleContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 30px 0;
}
#leftSection {
    float: left;
    width: 175px;
    background: #71ABD1;
    height: 100%;
    overflow: auto;
    color: black;
}
#middleSection {
    position: absolute;
    background-color: yellow;
    left: 175px;
    right: 175px;
    top: 0;
    bottom: 0;
    color: black;
}
#rightSection {
    float: right;
    height: 100%;
    width: 175px;
    border-left: 1px dotted black;
    background: red;
    color: black;
}
#footerContainer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: #323232;
    color: white;
}