JSFiddle - React, Tailwind, and code Playground

by Galen Gidman

HTML

<header class="page-row">
    <div class="row-inner">Header</div>
</header>
<main class="page-row page-row-expanded">
    <div class="row-inner">Main</div>
</main>
<footer class="page-row">
    <div class="row-inner">Footer</div>
</footer>

CSS

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
}
.page-row {
    display: table-row;
    height: 1px;
}
.page-row-expanded {
    height: 100%;
}
.row-inner {
    padding: 20px;
}
header {
    background: #555;
}
main {
    background: #eee;
}
footer {
    background: #bbb;
}