JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.18/jquery.zoom.js"></script>
<span class='zoom' id='ex3'>
   <img id="myImg" src="http://t.wallpaperweb.org/wallpaper/nature/1920x1200/Trolltunga_Odda_Norway.jpg" alt="Trolltunga, Norway" width="300" height="200">
   <p>Hover</p>
</span>


<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <div class="zoom">
    <img class="modal-content" id="img01" width=300 height=300>
  </div>
  
  
  <div id="caption"></div>
</div>

JavaScript

$(function(){
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
    $('.zoom').zoom({
      on: 'click',
      url: this.src
    });
  }
  // Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
})