JSFiddle - React, Tailwind, and code Playground

by t0nyh0

HTML

<div class="header">Title</div>
<div class="middle">
    <div id="panel0">Panel 0</div>
    <div id="panel1">Panel 1</div>
    <div id="panel2">Panel 2</div>
</div>
<div class="footer">Panel 3</div>

CSS

div
{
    text-align:center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
div.header, div.middle, div.footer{
    border: 1px solid gray;
    position:absolute;
    left: 0px;
    right: 0px;
}
.header
{
    height: 50px;
}
.middle
{
    top: 50px;
    bottom: 50px;
    padding: 5px;
}
.footer
{
    bottom: 0px;
    height: 50px;
}

#panel0,#panel1,#panel2
{
    float:left;
    width: 33.33%;
    height: 100%;
    border: 1px solid gray;
}

.first
{
    margin-left: 0px !important;
}

.last
{
    margin-right: 0px !important;
}