JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="wrapper">
    <div id="container">
        <header></header>
        <div id="main"></div>
        <footer></footer>
    </div>
    <div id="aside"></div>
</div>

CSS

#wrapper {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
#container {
    background:#efefef;
    height:100%;
    width:100%;
}

header {
    background:green;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:50px;
}

footer {
    background:darkgreen;
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:50px;
}

#main {
    background:yellowgreen;
    position:absolute;
    top:50px;
    right:0;
    bottom:50px;
    left:0;
}

#aside {
    background:blue;
    height:100px;
}
}