JSFiddle - React, Tailwind, and code Playground

HTML

<section class="main-window">
    <div id="topdiv"></div>
    <div id="middiv"></div>
    <div id="botdiv"></div>
</section>

CSS

.main-window
{
  vertical-align: middle;
  border: 2px solid gray;
  border-radius: 5px;
  width: 90%;
  height: 70%;
  background-color: White;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

#topdiv {
  background-color: beige;
  height: 40%;
  border: 2px solid black;
}

#middiv {
  background-color: lightblue;
  height: 40%;
  border: 2px solid black;
}

#botdiv {
  background-color: lightgreen;
  height: 20%;
  border: 2px solid black;
}