JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
/* first php page */
<div class="read_more" data-id="1"><a href='' data-toggle="modal">Read More...</a></div>
<div class="read_more" data-id="2"><a href='' data-toggle="modal">Read More...</a></div>
<div class="read_more" data-id="3"><a href='' data-toggle="modal">Read More...</a></div>

/* another php page */

<div class="portfolio-modal modal animated fadeIn" id="portfoliomodal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-content">
    <div class="close-modal" data-dismiss="modal">
      <div class="lr">
        <div class="rl">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="modal-body">
          <div id="myId">
            Clicked items id: <?php echo $id?>
          </div>

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

CSS

#myId{
  color:white;
  font-size:30px;
}

.portfolio-modal .modal-content {
  border-radius: 0;
  -moz-background-clip: border-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 50px 0;
  background: #141611;
}

.portfolio-modal .close-modal {
  position: absolute;
  width: 55px;
  height: 55px;
  background-color: transparent;
  top: 55px;
  right: 55px;
  cursor: pointer;
  position: absolute;
  z-index: 99;
}

.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}

.portfolio-modal .close-modal .lr {
  height: 35px;
  width: 1px;
  margin-left: 35px;
  background-color: white;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;
}

.portfolio-modal .close-modal .lr .rl {
  height: 35px;
  width: 1px;
  background-color: white;
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: 1052;
}

.portfolio-modal .modal-backdrop {
  opacity: 0;
  display: none;
}

JavaScript

jQuery(document).ready(function($) {

  $('.read_more').click(function(e) {
    $('.portfolio-modal').modal('show');
  });
});