JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          
        </div>
      </div>
    </div>  
    <div class="container">
      <div class="content">
        <div class="wrapper">
          </div>
          <div class="push"></div>
        </div>
        <div class="footer-wrapper">
        <footer>
          <center><div class="halfCircleBottom"></div></center>
         </footer>
        </div>

CSS

html, body, .container, .content {
    height: 100%;
}
 
.container, .content {
    position: relative;
}
 
.proper-content {
    padding-top: 40px; /* >= navbar height */
}
 
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* same as the footer */
}
 
.push {
    height: 100px; /* same as the footer */
}
.footer-wrapper {
    position: relative;
    height: 100px;
    background-color: #00cc00;
}

.halfCircleBottom{
     height:45px;
     width:90px;
     border-radius: 0 0 90px 90px;
     -moz-border-radius: 0 0 90px 90px;
     -webkit-border-radius: 0 0 90px 90px;
     background:green;
}