JSFiddle - React, Tailwind, and code Playground

by glee

HTML

<header>
    I'm a header!
</header>
<aside>
    Lots and lots and lots of content!
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
    Glee is awesome!<br/>
</aside>
<footer>
    I'm a footer!
</footer>

CSS

html {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 100%;
}
body {
    color: white;
    font-family: 'Century Gothic', 'Arial', Helvetica, Sans-Serif;
    padding-top: 40px;
    padding-bottom: 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 100%;
}
header {
    background-color: rgb(0, 162, 232);
    height: 40px;
    width: 100%;
    position: absolute;
    top: 0px;
}
footer {
    background-color: rgb(0, 162, 232);
    height: 40px;
    width: 100%;
    position: fixed;
    bottom: 0px;
}
aside {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 100%;
    overflow: auto;
    color: rgb(0, 162, 232);
}