JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/dimsemenov/PhotoSwipe/master/dist/photoswipe.min.js"></script>
<script src="https://raw.githubusercontent.com/dimsemenov/PhotoSwipe/master/dist/photoswipe-ui-default.min.js"></script>
<button id="gallery1">Open Gallery 1</button>
<button id="gallery2">Open Gallery 2</button>
<button id="gallery3">Open Gallery 3</button>

<!-- pswp dom structure -->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

  <!-- Background of PhotoSwipe. 
						 It's a separate element as animating opacity is faster than rgba(). -->
  <div class="pswp__bg"></div>

  <!-- Slides wrapper with overflow:hidden. -->
  <div class="pswp__scroll-wrap">

    <!-- Container that holds slides. 
								PhotoSwipe keeps only 3 of them in the DOM to save memory.
								Don't modify these 3 pswp__item elements, data is added later on. -->
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>

    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
    <div class="pswp__ui pswp__ui--hidden">

      <div class="pswp__top-bar">

        <!--  Controls are self-explanatory. Order can be changed. -->

        <div class="pswp__counter"></div>

        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

        <button class="pswp__button pswp__button--share" title="Share"></button>

        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

        <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
        <!-- element will get class pswp__preloader--active when preloader is running -->
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div...

CSS

/* PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */


/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/


/* pswp = photoswipe */

.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}


/* style is added when JS option showHideOpacity is set to true */

.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--open {
  display: block;
}

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}


/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/

.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
  -ms-touch-action: none;
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}


/* Prevent selection and tap highlights...

JavaScript

var items_gal1 = [

        // Slide 1
        {
            mediumImage: {
                src: 'https://unsplash.it/800/600?image=59',
                w:800,
                h:600
            },
            originalImage: {
                src: 'https://unsplash.it/1400/1050?image=59',
                w: 1400,
                h: 1050
            }
        },

        {
            mediumImage: {
                src: 'https://unsplash.it/800/600?image=61',
                w:800,
                h:600
            },
            originalImage: {
                src: 'https://unsplash.it/1400/1050?image=61',
                w: 1400,
                h: 1050
            }
        },

        {
            mediumImage: {
                src: 'https://unsplash.it/800/600?image=64',
                w:800,
                h:600
            },
            originalImage: {
                src: 'https://unsplash.it/1400/1050?image=64',
                w: 1400,
                h: 1050
            }
        }

    ];
    
    // just for the demo some more item strings, that are not called
    var items_gal2 = [

        // Slide 1
        {
            mediumImage: {
                src: 'https://unsplash.it/800/600?image=88',
                w:800,
                h:600
            },
            originalImage: {
                src: 'https://unsplash.it/1400/1050?image=89',
                w: 1400,
                h: 1050
            }
        },

        {
            mediumImage: {
                src: 'https://unsplash.it/800/600?image=90',
                w:800,
                h:600
            },
            originalImage: {
                src: 'https://unsplash.it/1400/1050?image=90',
                w: 1400,
                h: 1050
            }
        },

        {
            mediumImage: {
                src: 'https://unsplash.it/800/600?image=91',
                w:800,
                h:600
            },
            originalImage: {
                src:...