JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
   <div id="header">top menu</div>
   <div id="content">content content content content content content content content content</div>
   <div id="footer" align="center">
       <div class="left">left part of footer menu
           <script type="text/javascript">
               function doNothing() {}
           </script>
       </div>
       <div class="right">right part of footer menu</div> 
   </div> 
</div>

CSS

#container {
    position:relative;
    height:100%;
    min-height:100%;
    background-color:blue;
}

#content {
    padding:0em 0em 12em;
}

#footer {
    position:absolute;
    width:100%;
    bottom:0;
    background-color:red;
    height:20px;
}

.left {
    position:absolute;
    left:0;
    bottom:0;
}

.right {
    position:absolute;
    right:0;
    bottom:0;
}