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';
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: whitesmoke;
}


#contentcontainer
{
    /*min-height: 100%;  */
    height: 100%;
    position: relative;
    padding-bottom: 237px;   /* Height of the footer element */
    background-color: lightblue;
}


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

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


#greenfooter
{
    margin-top: 40px;
    background-color:red;
        width:100%;
height:237px;
position:absolute;
bottom:237px;
    /*bottom:0px; */
left:0;
}