JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<div id="container">
    <header>
        <h1>Page heading</h1>
    </header>
    
    <section>
        <p>
           This is some short content (doesn't fill the page). 
        </p>
    </section>
    
    <footer>
        Footer Text &copy; Nobody 2020
    </footer>
    
</div>

CSS

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
}

p { 
    line-height:1.5; 
    padding:1em;
}

div#container {
    margin:0 auto; /* center, not in IE5 */
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}

header {
    padding:1em;
    background:#ddd;
    border-bottom:6px double gray;
}

section:last-child {
    padding:1em 1em 5em; /* bottom padding for footer */
}

footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}