JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<h2>Multiple Modals Overlay Example.</h2>
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal 1</a>

<div class="modal fade" id="myModal">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title">Modal dialog title</h4>
           </div>
           <div class="container"></div>
           <div class="modal-body">
            <p>Your content for the dialog / modal goes here. </p> 
             <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>

           </div>
           <div class="modal-footer">	<a href="#" data-dismiss="modal" class="btn">Close</a>
 <a href="#" class="btn btn-primary">Save</a>
           </div>
       </div>
   </div>
</div>
<div class="modal fade" id="myModal2">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title">Modal dialog title</h4>

           </div>
           <div class="container"></div>
           <div class="modal-body">
           <p>Your content for the dialog / modal goes here. </p> 
           </div>
           <div class="modal-footer">	<a href="#" data-dismiss="modal" class="btn">Close</a>
 <a href="#" class="btn btn-primary">Save</a>

           </div>
       </div>
   </div>
</div>

JavaScript

$(function () {
  $('#openBtn').click(function () {
    $('#myModal').modal({
      show: true      
    })
  });

  $(document).on('show.bs.modal', '.modal', function (event) {
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    
    setTimeout(function() {
      $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
  });

});