JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <header>
        <p>The header</p>
    </header>
    <div id="main">
        <div class="the-margin">
            <div id="first">
                 <h1>First Content</h1>

            </div>
             <h2>Main Content</h2>

        </div>
    </div>
</div>
<footer>
    <p>Sticky footer</p>
</footer>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
}
body {
    background: #000;
    font-family: Arial;
    color: #fff;
}
#main {    
    overflow:auto;
}
.the-margin{
    margin: 50px;
}
footer {
    position: relative;
    clear:both;
}

JavaScript

$('#main').css('padding-bottom', $('footer').height());
$('footer').css('margin-top', -$('footer').height());