JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="top">top</div>
  <div class="middle">middle</div>
  <div class="bottom">bottom</div>
</div>

CSS

html, body{
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

.main{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

.top{
  position:absolute;
  top:0;
  width:100%;
  height:50px;
  background:#bbb;
}
.middle{
  position:absolute;
  top:50px;
  bottom:50px;
  width:100%;
  background:#fff;
}
.bottom{
  position:absolute;
  bottom:0;
  width:100%;
  height:50px;
  background:#bbb;
}