JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body">
    <div class="header">header</div>
    <div class="content">
        <div class="square"></div>
    </div>
    <div class="footer">footer</div>
</div>

CSS

.body {
  height: 250px;
  display: flex;
  flex-flow: column;
  background: red;
}
.header {
  height: 100px;
  background: blue;
}
.footer {
  height: 100px;
  background: green;
}
.content {
  flex-grow: 1;
  background: yellow;
}
.square {
  background: black;
  width: 100vh;
  height: 100vh;
}