JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header">
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
    </div>
    <div class="content">
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
        ala ma kota<br />
    </div>
    <div class="footer">
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
      ala ma kota
    </div>    
  </div>

CSS

.wrapper {
  height: 500px;
  width: 100%;
}
.header{
    max-height: 100px;
}
.header, .footer {
  background-color: tomato;
}

.content {
  height: 400px;
  background-color: yellow;
  overflow-y: scroll;
}