JSFiddle - React, Tailwind, and code Playground

HTML

<body>

        <div id="wrapper">

            <header> The header </header>

            <div id="main"> The content </div>
    
            <footer> The footer </footer>

            <div style="clear: both;"></div>
        </div>

    </body>

CSS

html, body{
    height: 100%;
}

header{
    border: 1px solid black;
}

#wrapper{
    min-height: 99%;
    border: 1px solid black;
    position: relative;
    padding: 40px;
}

#main{
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid black;
}

footer{
    border: 1px solid black;
    bottom: 10px;
    position: absolute;
    width: 100%;
}