JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="content">
        <div>Content</div>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue at nibh quis commodo. Nulla nunc dui, vestibulum in odio quis, mollis suscipit ligula. Praesent pellentesque consequat urna, eu faucibus nunc euismod ac. Nullam pretium nisi augue, sit amet placerat odio hendrerit et. Sed vel condimentum magna. Praesent vehicula placerat tellus quis aliquet. Aenean tempor eu augue id mollis. Vivamus eros libero, varius ut porta sed, vestibulum et ipsum. Ut ut ultrices erat. Etiam eu dui et lacus rutrum porttitor.
        </p>
        <p>
Sed vehicula et nunc at gravida. Ut eget dapibus augue. Curabitur consequat molestie dui vitae feugiat. Vivamus tincidunt congue turpis, ac auctor erat aliquam ut. Nam nec condimentum leo. Vestibulum placerat mauris lorem, et tincidunt odio ultricies sollicitudin. Sed nunc lorem, congue vitae enim at, rutrum vestibulum nibh. Fusce vitae nibh ac mauris laoreet tincidunt. Morbi rhoncus, leo eget sollicitudin volutpat, dolor est condimentum augue, quis rutrum purus orci sit amet dui. Proin ullamcorper urna lacus, et laoreet nunc accumsan ut. Cras mollis convallis enim, vel ornare nibh porttitor id. Suspendisse eleifend felis enim, egestas gravida risus congue quis. Integer pellentesque purus id porttitor consequat. Praesent et nisi molestie, euismod eros vehicula, rhoncus risus.
        </p>
    </div>
</div>
<div id="footer">
    Footer
</div>

CSS

/* reset default styles */
body {
    padding: 0;
    margin: 0;
}

/* sticky footer */
html, body {
    height: 100%;
}
#wrapper {
    position: relative;
    min-height: 100%;
}
* html #wrapper {
    height: 100%;
}
#content {
    padding-bottom: 120px;
}
#footer {
    position: relative;
    margin: -100px auto 0 auto;
}