JSFiddle - React, Tailwind, and code Playground

by Roman

HTML

<body>
<header>HEADER</header>
<content>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
CONTENT <br>
</content>
<footer>FOOTER</footer>
</body>

CSS

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

footer {
  position: absolute;
  bottom: 0;
}

* {
  width: 100%;
  text-align: center;
}

footer {
  background: yellow;
}