JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1 1 auto;
}
.box:nth-child(2) {
  background: pink url(//dummyimage.com/300) no-repeat center center / contain;
}