JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Wrapper">
    <div class="Header">header</div>
    <div class="Content">
   bottom:0;   position:absolute;
   bottom:0;   position:absolute;
   bottom:0;   position:absolute;
   bottom:0;   position:absolute;
   bottom:0;   position:absolute;
   bottom:0;   position:absolute;
   bottom:0;   position:absolute;
   bottom:0;   position:absolute;
   bottom:0;   position
   bottom:0;   position:absolute;
   bottom:0;   position:absolute;
   bottom:0;   position:absolute;
   bottom:0;   position:absolute;:absolute;
   bottom:0;   position:absolute;
   bottom:0;</div>
    <div class="FooterPush"></div>
  </div>
  <div class="Footer">Footer</div>

CSS

*{margin: 0;padding: 0;}
   
html, body{height: 100%;}
.Header{background:blue; position: fixed; width:100%;
display: block;} 
.Wrapper{min-height: 100%;}
.Wrapper .FooterPush{height: 50px;}
.Footer{clear: both;position: relative;margin-top: -50px;height: 50px;background:red;}