JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="top"></div>
    <div id="middle">middle text</div>
    <div id="bottom"></div>
</div>

CSS

html,body,#wrapper {
    height:100%;
    padding:0;
    margin:0;
}
#wrapper {
    position:relative;
}

#top, #middle, #bottom {
    position:absolute;
}

#top {
    height:50px;
    width:100%;
    background:grey;
}
#middle {
    top:50px;
    bottom:50px;
    width:100%;
    background:black;
    color:white;
}
#bottom {
    bottom:0;
    height:50px;
    width:100%;
    background:grey;
}