JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <header class="header">
        <p>This is the header</p>
    </header>
    <section class="content">
        <div class="content-body">
            <p>This is the content.</p>
        </div>
    </section>
    <footer class="footer">
        <p>This is the footer.</p>
    </footer>
</div>

CSS

/* Reset */
html, body { height: 100%; margin: 0; padding: 0; }

/* Essentials */
.container { display: table; }
.content { display: table-row; height: 100%; }
.content-body { display: table-cell; }

/* Aestetics */
.container { width: 100%; height: 100%; }
.header, .footer { padding: 10px 20px; background: #f7f7f7; }
.content-body { padding: 20px; background: #e7e7e7; }