JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="top">1</div> 
    <div class="center">2</div>   
    <div class="bottom">3</div>       
</div>

CSS

html,body {height: 100%;}

.box {display:table; height: 100%; width: 100%;}

.top, .center, .bottom {display: table-row; background: red;}

.center { height: 200px; background: blue;}