JSFiddle - React, Tailwind, and code Playground

by Ritchie Allen

HTML

<body>
    <header role="banner">
        <h1>Herons - How they plan to eat your eyes!</h1>
    </header>
    <main role="main">
        <p>Herons are foul and devious birds. They covet the flavor of your eye jelly.</p>
    </main>
    <footer>
        <small>© 2014 Institute for the prevention of Herons</small>
    </footer>
</body>

CSS

body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
}
footer {
    background: #dd55dd;
}