JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="cap">
 cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>cap<br>
  </div>
  <div class="page">page</div>
  <div class="footer">footer</div>
</body>

CSS

html,
body {
  height: 100%;
}
.cap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.page {
  height: auto;
  min-height: 100%;
  padding-bottom: 50px;
  background-color: #ccc;
  text-align: center;
}
.footer {
  height: 50px;
  margin-top: -50px;
  background-color: #bbb;
  text-align: center;
}