JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="header">
    <h1>Hello Header</h1>
  </div>
  <div class="middle">
    <h1>Content Section</h1>
  </div>
  <div class="footer">
    <h1>Hello Footer</h1>
  </div>
</div>

CSS

*{
  margin:0;
  padding:0;
}

.wrap{
  display:flex;
  flex-direction: column;
  height:100vh;
}

.header{
  border:2px solid red;
  height:20%;
}

.middle{
  border:2px solid green;
  height:60%;
}

.footer{
  border:2px solid grey;
   height:20%;
}