JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<header>
  <ul>
  	<li id="1"><img src="https://fakeimg.pl/300/"></li>
  	<li id="2"><img src="https://fakeimg.pl/250x100/"></li>
  	<li id="3"><img src="https://fakeimg.pl/250x100/ff0000/"></li>

  	<li id="6"><img src="https://fakeimg.pl/350x200/?text=Hello"></li>
  	<li id="7"><img src="https://fakeimg.pl/550x200/?text=World&font=lobster"></li>
  </ul>
</header>

<!-- Modal -->
<div class="area">
</div>


<div class=" modalExample">
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        
        <div class="modal-body">
          <img src="fakimg">
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

ul {
			height: 110px;
      width: 100%;
			background: grey;
      z-index: 3000;
      position: fixed;
		}
		ul li{
			float: left;
			padding: 2px;
			list-style: none;
		}
    ul li:hover{
      border: 1px solid red;
    }

		ul li img {
			max-width: 100px;
			max-height: 100px;
			border: 1px solid black;
		}

    .modal-dialog {
      min-width: 30px;
      min-height: 30px;

    }
    .modal-dialog:hover {
      border: 3px solid purple;
    }

JavaScript

$(document).ready(function(){

  $('li').click(function() {
    id = $(this).attr('id');
    imgsrc = $(this).children('img').attr('src');

    modaldiv = $('.modalExample').html();
    modaldiv = modaldiv.replace("myModal", "myModal_"+id);
    modaldiv = modaldiv.replace("fakimg", imgsrc);
    $('.area').append(modaldiv);

    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
      $('.modal-dialog').css({
        top: 200,
        left: 0
      });
    }

    //$('#myModal').modal({
    $('#myModal_'+id).modal({
      backdrop: false,
      show: true
    });

    $('.modal-dialog').draggable({
      handle: ".modal-body"
    });
  });
});