JSFiddle - React, Tailwind, and code Playground

by Ivan Shukshin

HTML

<div style="position:relative">
  <div style="position:absolute; height:1000px;right:30px;top:30px; border:1px solid red;">
  some tall text
  </div>
</div>

body tag has grey border <br>
footer is at the bottom of .. what? <br>
absolutely positioned div is taller than body <br>

<div id="footer">
footer
</div>

CSS

#footer{
  height:50px;
  background:darkblue;
  color: white;
  font-size:16px;
  position:absolute; 
  bottom:0px;
  width:100%;
}
body{
  position:relative;
  min-height:400px;
  border: 2px solid grey;
}