JSFiddle - React, Tailwind, and code Playground

HTML

<header> The header content goes here. </header>

   <div class="content"> The main content goes here. </div>

   <footer> The footer content goes here. </footer>

CSS

* {
  margin:0;
}
header {
  position:absolute;
  width:100%;
  height:64px;
  top:0;
  background:red;
}
footer {
  position:absolute;
  width:100%;
  height:64px;
  bottom:0;
  background:green;
}
.content {
  position:absolute;
  width:100%;
  top:64px;
  bottom:64px;
  background:blue;
}