JSFiddle - React, Tailwind, and code Playground

HTML

<div class="root">
 <div class="head">
  Header
  </div>
 <div class="dynamic">
 bla bla bla
 bla bla bla
 </div>
<div class="body">
 bla bla bla </br>
 bla bla bla </br>
  bla bla bla </br>
 bla bla bla </br>
  bla bla bla </br>
 bla bla bla </br>
  bla bla bla </br>
 bla bla bla </br>
  bla bla bla </br>
 bla bla bla </br>
  bla bla bla </br>
 bla bla bla </br>
  bla bla bla </br>
 bla bla bla </br>
  bla bla bla </br>
 bla bla bla </br>
</div>
</div>

CSS

.root {
    display:block; 
    min-height: 100px;
    height: 100%;
}
.head {
    display:block; 
    height: 5%;
}
.dynamic{
    display:block; 
    background-color: #436FAC;
    min-height: 100px;
    height: 10%;
    color: #FFF;
}
.body {
  display:block; 
  background-color: #436F11;
  color:#FFFFFF;
  overflow: auto;
  /*height: 500px;*/
  height: 85%;
}