JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.js"></script>
<div  id ="outerPage" data-cache="false" data-role="page" style="overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; top: 0;
  right: 0;
  bottom: 0;
  left: 0;">
      <div data-role="header">
       I am header
      </div>
      <div class="wrap">
          I am a content<br/>   I am a content<br/>   I am a content<br/>   I am a content<br/>   I am a content<br/>   I am a content<br/>   I am a content<br/>   I am a content<br/>   I am a content<br/>   I am a content<br/>   I am a content<br/>   I am a content<br/>    I am a content<br/>   I am a content<br/>   I am a content<br/>    
      </div>
      <div class="footer" >
          I am footer
      </div>
</div>

CSS

.footer{
    
bottom:0px;
    position:absolute;
    background-color:yellow;
    width:100%;
}