JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>

.modal { 
/*simple fix for multiple bootstrap modal backdrop issue: 
don't need to recalculate backdrop z-index;
https://stackoverflow.com/questions/19305821/multiple-modals-overlay/21816777 */
  background: rgba(0, 0, 0, 0.5);
}


/* this fix is not enough, without javascript to count/track the opened modal, the background body is scrollable.
not good for mobile browser. 
.modal { overflow: auto !important;}
*/

</style>

<script type="text/javascript">
var bootstrapModalCounter = 0; //counter is better then using visible selector

$(document).ready(function () {  
  $('.modal').on("hidden.bs.modal", function (e) {
    --bootstrapModalCounter;
    if (bootstrapModalCounter > 0) {
      //don't need to recalculate backdrop z-index; already handled by css
      //$('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
      $('body').addClass('modal-open');
    }
  }).on("show.bs.modal", function (e) {
    ++bootstrapModalCounter;
    //don't need to recalculate backdrop z-index; already handled by css
  });
});
</script>






<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal1">
              click me            </button>
        
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">FIRST MODAL</h4>
      </div>
      <div class="modal-body">
        <p>One fine <input type='text'/>&hellip;</p><p>One fine <input...