JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <div class="part a">1</div>
  <div class="part b" style="height:150px;">2</div>
  <div class="part c">3</div>
</div>
<div class="footer d">
  this footer
</div>

CSS

html, body {height:100%;}

.content {
   height: 100%;
}

.part {
   height: 100%;
   width: 100%;
}

.a {background-color: red;}
.b {background-color: green;}
.c {background-color: blue;}
.d {background-color: orange;}