JSFiddle - React, Tailwind, and code Playground

HTML

<a class="open_window"><img src="https://r.mradx.net/pictures/15/44F125.jpg" data-img="https://r.mradx.net/pictures/15/44F125.jpg" /></a>

<div class="overlay close_window"></div>
<div class="popup">
    <div class="img"></div>
</div>

CSS

.overlay { background-color: rgba(0, 0, 0, 0.7); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; transition: opacity .5s;}
.popup {background: #fff; display: inline-block; left: 50%; opacity: 0; padding: 50px 30px; height: auto; position: fixed; text-align: center; top: 50%; visibility: hidden; z-index: 1; transform: translate(-50%, -50%); transition: opacity .5s, top .5s;}

img {width:150px;}

JavaScript

$(document).ready(function(){
 $('.popup .close_window, .overlay').click(function (){
  $('.popup, .overlay').css({'opacity':'0', 'visibility':'hidden'});
 });
 $('a.open_window').click(function (e){
  $('.popup, .overlay').css({'opacity':'1', 'visibility':'visible'});
  e.preventDefault();
 });
  $('a img').on('click', function(){
    $('.popup .img').append('<img src="'+$(this).attr('src')+'" />');
});
});