JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <header>
        <p>Header</p>
    </header>
    <section>
        <p>Section</p>
    </section>
</div>

<footer>
    <p>Footer</p>
</footer>

CSS

html, body, header, footer, section, p, div {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

p {
    padding: 5px 10px;
}

header {
    width: 100%;
    background: #f00;
    color: #fff;
}

section {
    width: 100%;
    height: 200px;
    background :#0f0;
    color: #fff;
}

#container {
    width: 100%;
    min-height: 100%;
    margin-bottom: -50px;
}

footer {
    width: 100%;
    background :#00f;
    color: #fff;
    height: 50px;
}