JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

CSS

html {
       height:100%; 
   }
   body{
      height:100%; 
       margin: 0px;
       display: flex;
       flex-direction: column;
   }
   .a{
       width:100%;
       height: 40px;
       background-color: aquamarine;
   }
   .b{
       flex:1;
       background-color: rgb(255, 127, 127);
   }
   .c{
       width:100%;
       height: 40px;
       background-color: rgb(255, 127, 212);
   }