JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header"></header>

<main class="main"></main>

<footer class="footer"></footer>

CSS

body {
  margin: 0;
    min-height: 100vh;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
}

.header {
    -ms-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    
    height: 200px;
    background: #777;
}

.main {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    background: red;
}

.footer {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    
    height: 200px;
    background: #777;
}