JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="content"></div>

<div class="footer">
    <p>Hello!</p>
    <p>How</p>
    <p>are</p>
    <p>you</p>
    <p>?</p>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}

.content {
    position: relative;

    z-index: 1;
    
    height: 50em;
    margin-bottom: 15em; /* same as footer height */
    
    background-color: #eee;
}

.footer {
    position: fixed;

    bottom: 0;
    left: 0;
    right: 0;

    height: 15em;  

    color: #fff;
    background-color: rgb(49, 53, 58);
    
    text-align: center;
}