JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <p>Some text</p>
    <p>Some text</p>
    <p>etc...</p>
</div>
 
<div id="footer">Footer</div>

CSS

html, body {
    position: relative;
    height: 100%;
  }
 
  #footer {
    width: 100%;
    height: 100px;
    margin-top: -100px;
    box-sizing: border-box;
    padding: 10px;
    border-top: 3px solid gray;
    background-color: lightyellow;
    text-align: center;
  }
 
  #content {
    position: relative;
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 100px;
    border: 1px dotted red;
  }