JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bodyWrapper">
    <div class="header boxes">header</div>
    <div class="corpo boxes">corpo</div>
    <div class="footer boxes">footer</div>
</div>

CSS

body{margin:0;}
.bodyWrapper {width:80%;} /* Exemplo virtual da tag <body> ou de um wrapper/container */
.header {height:25vh;}
.corpo {height:50vh;}
.footer {height:25vh; position:absolute;}
.boxes {
    width:100%;
    padding: 10px;
    background-color:royalblue;
    box-sizing: border-box;
    border-bottom:1px solid #f2f2f2;
}