JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>

CSS

html, body {height: 100%; padding: 0; margin: 0; }
body { display: table; width: 100%; height: 100%; }
.header, .footer, .content { display: table-row; }
.header, .footer { height: 1px; }
.content { height: auto; }

.header { background: red; }
.content { background: green; }
.footer { background: orange; }