JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<div class="wrap">
    <header>header</header>
    <section>
        <article>content</article>
    </section>
    <footer>footer</footer>
</div>

SCSS

.wrap {
    min-height: 100vh;
    background: gray;
    box-sizing: border-box;
}

header {
    padding: 1rem;
    background: rgba(255,255,255,0.5);
}

section {
    padding: 1rem;
}

footer {
    padding: 1rem;
    background: rgba(255,255,255,0.5);
    position: absolute;
    bottom: 0;
    width: 100%;
}