JSFiddle - React, Tailwind, and code Playground

by zzzzBov

HTML

<div id="main-wrapper">
    <header>
        <h1>foo bar baz</h1>
    </header>
    <nav>
    </nav>
    <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate lectus id odio tincidunt tincidunt. Praesent tempus metus sit amet urna dictum sit amet dignissim sapien tincidunt. Praesent vulputate, leo eget facilisis sodales, sem tortor sagittis arcu, a tincidunt massa lorem eu nisl. Morbi vitae pulvinar leo. Fusce nec urna at tellus elementum congue. Maecenas sed tortor vitae mi rutrum venenatis. Aliquam in augue orci. Nunc sit amet erat dui. Duis est tortor, consequat ut luctus eu, adipiscing sit amet eros. Quisque porttitor, mi quis adipiscing laoreet, urna sem aliquet quam, nec tempus justo turpis quis nunc. Ut condimentum ante non arcu tempus et sagittis nisi suscipit.</p>
    </article>
    <footer>
        <p>Footer!</p>
    </footer>
</div>

CSS

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

header,
nav,
article,
footer {
    display: block;
}

#main-wrapper {
    background-color: #F0F0F0;
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

header {
    background-color: #0C0;
    padding: 3px 5px;
}

footer {
    background-color: #00C;
    bottom: 0;
    color: #FFF;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}