JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
Logo. Menu
</div>

<div id="content">
<div>Text Text Text</div>
</div>

<div id="bottom">
Text in the bottom
</div>

CSS

#top {
  width: 100%;
  height: 100px;
  background-color: red;
}
#bottom {
  width: 100%;
  height: 100px;
  background-color: blue;
  margin: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
}


    #content {}
    
    #content div {
      position: absolute;
      padding: 0;
      margin: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }