JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="contentcontainer">
            <div id="green-line">
            </div>
            <div class="center-box">
                Content goes here
                <br/>and here
                <br/>and here
                <br/>and here
                <br/>and here
                <br/>and here
                <br/>and here
                
            </div>
            <div id="greenfooter">
                <div style="min-height: 7px; background-color: #EDEDED; background-color: whitesmoke;">
                </div>
                <div>
                    Footer here
                </div>
            </div>
        </div>
    </body>
</html>

CSS

html, body
{
    font-family: Arial, helvetica, Calibri, 'Arial Unicode MS';
    padding: 0;
    margin: 0;
    background-color: whitesmoke;
}


#contentcontainer
{
    padding-bottom: 237px;   /* Height of the footer element */
    background-color: lightblue;
}


#green-line
{
    height: 5px;
    background-color: #b8d30b;
}

.center-box
{
    width: 90%;
    margin: auto;
    padding-left: 20px;
}


#greenfooter
{
background-color:red;
width: 100%;
height:237px;
position: fixed;
bottom:0px;
}