JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div id="content">
    <h1>Latin</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel quam congue, pellentesque lectus et, consequat turpis. Nam diam arcu, porttitor in imperdiet eu, molestie eu urna. Proin bibendum gravida finibus. Praesent turpis justo, gravida sed magna mollis, scelerisque tincidunt neque. Donec a hendrerit libero. Suspendisse potenti. Aliquam bibendum faucibus mi sed fermentum. Phasellus consequat massa id turpis interdum placerat. Suspendisse ex eros, elementum non quam ut, aliquam ultricies sem. Aenean eu accumsan nibh, a imperdiet nunc. Nullam a felis arcu. Quisque scelerisque mi ut pellentesque faucibus.</p>
    
</div>

<div id="footer">
    Hello
</div>

CSS

html, body {
    height: 100%;
}
body {
    padding-bottom: 80px; /* the height of the footer (60px) + extra spacing (20px) */
}
#footer {
    background-color: #333;
    color: #FFF;
    line-height: 20px;
    padding: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
}