JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css">

<div class="slickslider">
  <div>
  <a href="//hsto.org/files/108/60d/dfe/10860ddfec704127933b24a0f8dce28b.jpg" class="image-link">
  <img src="//hsto.org/files/108/60d/dfe/10860ddfec704127933b24a0f8dce28b.jpg"></a>
  </div>
  <div>
  <a href="//hsto.org/getpro/toster/01b298cc/6f4c/4a82/01b298cc-6f4c-4a82-aa62-ff26a8c641a9/79d836b6779a57a2915383cfbebd6df7cc399b69_1.jpg" class="image-link">
  <img src="//hsto.org/getpro/toster/01b298cc/6f4c/4a82/01b298cc-6f4c-4a82-aa62-ff26a8c641a9/79d836b6779a57a2915383cfbebd6df7cc399b69_1.jpg"></a>
  </div>
</div>

JavaScript

$('.slickslider').slick()


$('.image-link').magnificPopup({
  type: 'image',
  closeOnContentClick: true,
  closeBtnInside: false,
  fixedContentPos: true,
  mainClass: 'mfp-with-zoom', 
  image: {
	  verticalFit: true
  },
  zoom: {
    enabled: true, 
    duration: 300
  }
});