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 class="data">
       <h1>
         Yogendra Raikwar
       </h1>
       <h1>
         Yogendra Raikwar
       </h1>
       <h1>
         Yogendra Raikwar
       </h1>
       <h1>
         Yogendra Raikwar
       </h1>
       
    </div>
  </div>
  <div class="push">
  
  </div>
</div>
<div class="footerDiv"></div>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.push {
    height: 60px; /* .push must be the same height as .footer */
}

.containerDiv {
position: relative;
min-height: 100%;
background-color: beige;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px; /* the bottom margin is the negative value of the footer's height */
}

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

.contentDiv {
padding-bottom: 60px;
}

.footerDiv {
background-color: pink;
width: 100%;
height: 60px;
position: relative;
}

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

.data{
  position:absolute;
  top:200px;
  left:400px;
}