JSFiddle - React, Tailwind, and code Playground

HTML

<table class = "wrapper">
        <tr><td class = "header">I'm the header.</td></tr>
        <tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr>
        <tr><td class = "footer">I'm the footer.</td></tr>
    </table>

CSS

html, body, .wrapper {
   height: 100%;   
}
.header {
    height: 100px; /*This value can be anything*/
    background-color: rgb(0, 140, 200);
    color: white; /*just to make it pretty*/
}
.content {
    text-align: center;
}
.footer {
    height: 100px;
    background-color: rgb(0, 140, 200);
    color: white; /*just to make it pretty*/
}