JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<header></header>
<article>
  <div class='empty'>
    content
  </div>
  <div class='empty'>
    content
  </div>
  <div class='empty'>
    content
  </div>
  <div class='empty'>
    content
  </div>
  <div class='empty'>
    content
  </div>
</article>
<footer></footer>

CSS

html, body {
  height: 100%;
  margin: 0;
}
header,footer {
  height: 100px;
  background-color: white;
}
article {
  height: calc(100% - 200px);
  overflow-y: scroll;
  background-color: tomato;
}
.empty {
  height: 100px;
  margin: 20px 0;
}