JSFiddle - React, Tailwind, and code Playground

HTML

<div class="containerDiv">
  <div class="headerDiv"></div>
  <div class="contentDiv">
    <div class="innerDiv"></div>
    <div class="innerDiv"></div>
    <div class="innerDiv"></div>
    <div class="innerDiv"></div>
    <div class="innerDiv"></div>
  </div>
  <div class="footerDiv"></div>
</div>

CSS

.containerDiv {
position: relative;
min-height: 100%;
background-color: beige;
}

.headerDiv {
height: 60px;
background: black;
width: 100%;
}

.contentDiv {
padding-bottom: 60px;
}

.footerDiv {
position: fixed;
left: 0;
bottom: 0;
right: 0;
background-color: pink;
width: 100%;
height: 60px;
}

.innerDiv {
  width: 100%;
  height: 60px;
}