JSFiddle - React, Tailwind, and code Playground

by id10922606

HTML

<div class="main">
    
    <div class="hd">hd</div>
     <div class="data">Data</div>
     <div class="foot">foot</div>
    
</div>

CSS

.main { border:solid 1px red; height:500px;}
.hd {border:solid 1px red; height: calc(100% - 50px);}
.data {border:solid 1px red;}
.foot {border:solid 1px red; height: calc(100% - 10px);}