JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page">

  <div data-role="header" data-position="fixed">

    <h1>Custom Bottom Panel</h1>

    <div class="overlay" id="overlay" style="display:none;"></div>

    <div class="box" id="box">
      <div class="box-inner" id="close">
        <div class="ui-input-btn ui-btn ui-corner-all ui-shadow">
        Input value
        <input type="button" data-enhanced="true" value="Input value">
    </div>
    <iframe src="https://servicios.siur.com.co/ParadaMIO/" allow="geolocation"></iframe>
      </div>
    </div>
  </div>
  <!-- /header -->
  <div data-role="content">
    <p>Page content goes here.</p>
  </div>
  <!-- /content -->

  <div data-role="footer" data-position="fixed" style="z-index: 1">
    <a id="openpanel" data-icon="bars" data-iconpos="notext">Home</a>
  </div>
  <!-- /footer -->
</div>
<!-- /page -->

CSS

.box {
  position: fixed;
  bottom: -100%;
  left: 0%;
  height: 100%;
  background-color: #DBDBDB;
  width: 100%;
  display: block;
  z-index: 999999;
}

.box-inner {
  position: absolute;
  width: 100%;
  top: 0px;
  bottom: 0px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

JavaScript

$(function() {

  $('#openpanel').click(function() {
    $('#box').animate({
      'bottom': '0'
    }, 300);
  });

  $('#close').click(function() {
    $('#box').animate({
      'bottom': '-100%'
    }, 300)
  });

});