JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="header"> <h1>This text should make height of this cell</h1></div>
    <div class="row">
        <div class="cell">
            <div style="height:100%;background-color:#00f;color:#fff;">
                This cell should take all unused space of table
            </div>
        </div>
    </div>
    <div id="footer"><h1>This text should make height of this cell</h1></div>
</div>

CSS

html, body {
    height:100%;
    margin: 0;
    padding: 0;
}
h1 {
    form-size:20px;
    margin:0;
    padding:20px;
}
#wrapper {
    height:100%;
    width:100%;
    display:table;
}
#header {
    background-color:#f00;
    display:table-row;
}
#footer {
    background-color:#0f0;
    display:table-row;
}
.row {
    background-color:#00f;
    color:#fff;
    height:100%;
    display:table-row;
}
.cell {
    display:table-cell;
}