JSFiddle - React, Tailwind, and code Playground

by nancynancy

HTML

<body>
<article>
    <!-- or <div class="container">, etc. -->
     <h1>James Dean CSS Sticky Footer</h1>

    <p>Blah blah blah blah</p>
    <p>More blah blah blah</p>
</article>
<footer>
     <h1>Footer Content</h1>

</footer>
</body>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
    /* bottom = footer height */
    padding: 25px;
}
footer {
    background-color: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow:hidden;
}