JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="header centered">
Header
</div>
<div class="content centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada bibendum lacus ut consectetur. Fusce ultrices in libero eget porta. Nulla imperdiet nibh vitae dui rutrum interdum. Quisque iaculis finibus enim, eu condimentum diam. Phasellus sit amet leo aliquam, fringilla felis sed, ultricies nisi. Phasellus leo lacus, sodales nec nibh sit amet, consequat scelerisque nibh. Mauris a ligula rhoncus, lacinia leo id, pellentesque velit. Suspendisse sit amet placerat lorem. Vivamus fringilla accumsan dapibus. Sed mattis lorem nec nisl posuere, sit amet interdum quam finibus. Cras gravida, eros in ullamcorper volutpat, orci massa pellentesque nunc, vel volutpat ipsum arcu ac sem. Phasellus ligula arcu, ultrices quis elementum eget, tempus quis risus. Aliquam quis ipsum lacinia, rutrum odio ut, placerat ex. Etiam non orci vel erat bibendum aliquam. Donec at purus vitae dolor ullamcorper gravida. Maecenas metus ex, eleifend vel suscipit non, congue nec metus.
Fusce vel feugiat risus. Nullam quis pharetra nisl, vel venenatis ipsum. Morbi fermentum quis metus quis congue. In ullamcorper finibus libero, eu sagittis tortor laoreet a. Vivamus scelerisque erat tincidunt odio iaculis pharetra. Etiam facilisis, sapien a varius sagittis, velit nibh viverra nibh, in egestas mi enim ac orci. Morbi aliquet rhoncus orci ut tincidunt. Etiam dui sem, varius et magna nec, molestie porttitor nulla. Sed porta finibus ipsum, vitae porttitor odio scelerisque vel. Sed vulputate orci ante, vitae auctor nibh volutpat malesuada. Etiam eget ex vel libero consectetur porttitor sit amet ac ante. In hac habitasse platea dictumst. Curabitur sed libero dolor. In volutpat tincidunt leo laoreet ullamcorper.
Pellentesque tincidunt quis urna sed bibendum. Aliquam tincidunt aliquam purus quis porttitor. Vestibulum faucibus, neque et commodo aliquam, mauris ligula mollis sapien, vel...
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 100px auto 150px;
grid-template-columns: auto;
}
.centered {
display: flex;
justify-content: center;
align-items: center;
}
.header {
background-color: lightblue;
}
.content {
background-color: lightcyan;
padding: 20px;
}
.footer {
background-color: lightyellow;
}