JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header">
        <h1>Footers at the bottom of the page </h1>
    </div>
    <div id="body">
        <p>Lorem Ipsum Dolar sit amet</p>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>

CSS

html,
    body {
        margin:0;
        padding:0;
        height:100%;
    }
    #container {
        min-height:100%;
        position:relative;
    }
    #header {
        background:#ccc;
        padding:10px;
    }
    #body {
        padding:10px;
        padding-bottom:60px;
    }
    #footer {
        position:absolute;
        bottom:0;
        width:100%;
        height:60px;
        background:#000;
    }

    #header p,
    #header h1 {
        margin:0;
        padding:10px 0 0 10px;
    }
    #footer p {
        margin:0;
        padding:10px;
    }