JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <header>HEADER</header>
    <section id="main">Here comes short content</section>
    <footer>FOOTER</footer>
</div>

CSS

html, body {
    height:100%;
}

#wrapper {
    position: relative;
    min-height:100%;
}

#main {
    padding-bottom: 44px;
}

footer {
    height: 44px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}