JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<main>
  <!-- <div class='empty-box'>
  
  </div> -->
</main>
<footer>
  
</footer>

CSS

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

main {
  flex-grow: 1;
  flex-shrink: 1;
  background: red;
}

footer {
  height: 200px;
  background: blue;
  flex-grow: 0;
  flex-shrink: 0;
}

.empty-box {
  height: 1000px;
}