JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="top">
    Logo. Menu<br />
    Dynamic content
  </div>
  <div class="content">
    <div>Text Text Text</div>
  </div>
  <div class="bottom">
    Text in the bottom<br />
    Dynamic content
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
}
.main {
	display: table;
	width: 100%;
	height: 100%;
}
.top {
	height: 0;                /* make it dynamic */
	background-color: red;
	display: table-row;
}
.bottom {
	height: 0;                /* make it dynamic */
	background-color: lime;
	display: table-row;
}
.content {
	display: table-row;
	vertical-align: middle;
	background: yellow;
}
.content div {
    text-align: center;
	vertical-align: middle;
	display: table-cell;
}