JSFiddle - React, Tailwind, and code Playground

by Liu David

HTML

<body>
    <div class="top-wrapper">
        <div class="content-wrapper">
            <header>
                header
            </header>
        </div>
    </div>

    <div class="mid-section">
        <div class="left-wrapper">
            Left Pane
        </div>
        <div class="main-content">
            Main pane
        </div>
        <div class="right-wrapper">
            right pane
        </div>
    </div>

    <div class="bottom-wrapper">
        <div class="content-wrapper">
            footer
        </div>
    </div>

</body>

CSS

.top-wrapper {
    background-color: red;
    width: 100%;
    min-height: 2em;
    height: 5em;
    margin: 0em;
    display: block;
}
.mid-section
{
    background-color: blue;
    width: 100%;
    height:1000px;
    overflow:hidden;
}

.left-wrapper, .right-wrapper {
    background: #ffff00;
    height: 100%;
    min-height: 100%;
    width: 21%;
    display:block;
    float:left;
    margin:0;
}

.right-wrapper {
    background:#efefef;
    float:right;
}

.main-content {
    background-color: black;
    width: 58%;
    height: 100%;
    margin:0;
    float:left;
}

.bottom-wrapper {
    background-color: #D8D8D8;
    width: 100%;
    min-height: 2em;
    height: 5em;
    margin: 0em;
    padding: 1em;
    display: block;
    bottom:0;
}