JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<div class="wrapper">
    <header></header>
    <main>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>world</p>
    </main>
    <div class="push-footer"></div>
</div>
<footer class="push-footer"></footer>

CSS

*{margin:0;padding:0;}
html,body{height:100%;width:100%;}
header{height:50px;background:#CCC;}
footer{background:#333;}
.push-footer{height:30px;}
.wrapper{min-height:100%;height:auto;margin-bottom:-30px;}
p{padding-top:5px;}
p:last-of-type{padding-bottom:5px;}