JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <header>Header</header>
    <div id="body">
        <p>Body</p>
    </div>
    <footer>Footer</footer>
</div>

CSS

html, body
{
    margin:0px; height:100%; 
}
#wrapper
{
    display:-webkit-box; display:flexbox; -webkit-box-orient:vertical; -webkit-box-flex:1; -webkit-flex-flow:column nowrap; background-color:#f00; height:100% ; 
    
}
#body
{
    display:-webkit-box; -webkit-box-orient:horizontal; background-color:#ff6a00; flex:1; -webkit-box-flex:1; overflow: hidden;
}
header
{
    background-color:#4cff00; height:200px
}
footer
{
    background-color:#4cff00; height:200px;
}