JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainContent">
    <div>Main Content here</div>
</div>
<div class="footer">
    <div>Footer Content here</div>
</div>

CSS

#mainContent {
    height:50px;
    width:100%;
    background-color: Orange;
    padding:25px;
}

#mainContent > div {
    margin:0 auto;
    width:200px;
    font-size:22px;
    font-weight:bold;
}
.footer {
    height:40px;
    width:100%;
    background-color:Black;
    color:White;
    position:absolute;
    bottom:0px;
}

.footer > div {
    margin:0 auto;
    width:200px;
    font-size:22px;
    font-weight:bold;
}