JSFiddle - React, Tailwind, and code Playground

by Stefan Sturm

HTML

<header>
    <ol>
        <li>bar</li>
        <li>foo</li>
    </ol>
</header>
<main>
    <section>
        <div class="content"></div>
    </section>

    <div class="push"></div>
</main>
<footer></footer>

CSS

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

    header {
        background-color: #abc;
        z-index: 1000;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }

    main {
        min-height: 100%;
        height: auto !important;
        margin-bottom: -54px;
    }

    main > section{
        padding-top: 72px;
    }

    .content {
        background-color: #000;
    }

    .push {
        height: 54px;
    }

    footer {
        background-color: #def;
        height: 54px;
    }