JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">header</div>
<div id="content" class="scrollable centered">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis, nisi id consectetur convallis, velit mauris placerat diam, sed dapibus ante metus scelerisque turpis. In aliquam iaculis lacus non accumsan. Morbi pharetra tempus felis, non posuere diam vehicula elementum. In sollicitudin arcu a tellus eleifend ornare. Vestibulum tempor varius orci, a dignissim lectus maximus at. Quisque cursus lectus non elit scelerisque, at ultricies mi viverra. Nam eget ante at leo posuere consectetur ac ut urna. Mauris eleifend, nulla vitae porttitor aliquam, turpis velit sollicitudin sem, nec finibus leo ipsum sed est.</p>

<p>Vivamus ac lacus eu metus ullamcorper cursus sit amet ac est. Nulla quis elementum lorem. Praesent a porttitor nulla. Sed eget turpis justo. Proin ac interdum mauris. Donec pulvinar ligula eu nisl dapibus interdum. Etiam at sem ac risus venenatis ullamcorper.</p>

<p>Mauris bibendum tortor quis auctor malesuada. Maecenas ut eros quis urna gravida dignissim sit amet sed quam. Aenean condimentum sodales tellus ut malesuada. Pellentesque consequat lectus nec aliquam vehicula. Suspendisse tristique est mi, a ornare massa semper id. Mauris pellentesque purus sed neque tincidunt condimentum. Sed enim nunc, varius vulputate neque quis, pretium bibendum magna. Mauris et eleifend enim, id molestie risus. Nunc eget luctus elit. Suspendisse ipsum mauris, auctor sed pulvinar cursus, condimentum et sem. Nulla et libero gravida, cursus orci a, mattis lorem.</p>

<p>Nam finibus, libero et congue sagittis, elit dui hendrerit ipsum, vel sodales massa libero ut diam. Phasellus varius convallis facilisis. Duis a porta ante. Praesent fringilla sapien massa, ac commodo orci dignissim ac. Aliquam ante sapien, tristique quis finibus at, pharetra sit amet quam. Vivamus in dui at felis consectetur maximus. Aliquam ut enim purus. Fusce ullamcorper tellus ante, id semper lorem malesuada...

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
#content{
  background-color: lightgreen;
  flex-grow: 1;
}
#header, #footer{
  background-color: salmon;
}
.scrollable {
  position: relative;
  overflow-y: auto;
}
.centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}