JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header role="banner">
    <div>
        <div>
            This is the top banner
        </div>
    </div>
</header>
<section role="main">
    <div>
        <div>
            <div>
               <div>
                   <div style="border: 2px solid red;">
                        This is the content<br/>
                        This is the content<br/>
                        This is the content<br/>
                        This is the content<br/>
                        This is the content<br/>
                   </div>
                </div>
            </div>
        </div>
    </div>
</section>
<footer role="contentinfo">
    <div>
        <div>
            This is the footer
        </div>
    </div>
</footer>
</body>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    width: 100%;
    display: table;
    position: absolute;
    border-spacing: 0;
    border-collapse: collapse;
}

header, footer, section {
    display: table-row;
    text-align: center;
    vertical-align: middle;
    height: 1px;
}

header > div, section > div, footer > div {
    display: table-cell;
    vertical-align: middle;
}

header > div > div,
section > div > div,
section > div > div > div,
footer > div > div {
    max-width: 400px;
    width: 100%;
    margin: auto;
    background-color: brown;
}

section,
section > div,
section > div > div,
section > div > div > div,
section > div > div > div > div {
    box-shadow: inset 0 1em 1em -1em #222, inset 0 -1em 1em -1em #222;
    height: 100%;
    vertical-align: middle;
}

section > div {
    display: table-cell;
}

section > div > div {
    display: table;
}

section > div > div > div {
    display: table-row;
}

section > div > div > div > div {
    display: table-cell;
}

/* temp */
header {
    background-color: pink;
}

section {
    background-color: yellow;
}

footer {
    background-color: orange;
}