JSFiddle - React, Tailwind, and code Playground

HTML

<header class="global-header">HEADER</header>

<section class="main-content">CONTENT</section>

<footer class="global-footer">FOOTER</footer>

CSS

html, body {
    padding: 0; margin: 0;
    height: 100%;
}

.global-header {
    width: 100%;
    float: left;
    min-height: 5em;
    background-color: red;
}

.main-content {
    width: 100%;
    float: left;
    height: 50em;
    background-color: yellow;
}

.global-footer {
    width: 100%;
    float: left;
    min-height: 5em;
    background-color: lightblue;
}

@media (min-width: 30em) {
    
    .global-header {
        position: fixed;
        top: 0;
        left: 0;
    }
    
    .main-content {
        height: 100%;
        padding-top: 5em;
    }
    
    .global-footer {
        position: fixed;
        bottom: 0;
        left: 0;
    }

} /* ================== */