JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
the content
<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
f<br>
t
</div>
<footer></footer>

CSS

html{
  height:100%;
}
body{
  min-height:100%;
  margin:0;
  position:relative;
}

footer{
  background: #ccc;
  height:30px;
  position: absolute;
  bottom:0;
  width:100%
}

#content{
  padding-bottom:30px;
}