JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><a href="http://rejas.github.io/imagelightbox/images/demo1.jpg" data-imagelightbox="1"><img src="http://rejas.github.io/imagelightbox/images/thumb1.jpg" alt="Gallery 1"></a></li>

</ul>

CSS

/*src file "imagelightbox.min.css" */
#imagelightbox{cursor:pointer;position:fixed;z-index:10000;-ms-touch-action:none;touch-action:none;-webkit-box-shadow:0 0 3.125em rgba(0,0,0,.75);box-shadow:0 0 3.125em rgba(0,0,0,.75)}#imagelightbox-loading,#imagelightbox-loading div{border-radius:9999px}#imagelightbox-loading{background-color:grey;background-color:rgba(0,0,0,.5);position:fixed;z-index:10003;top:50%;left:50%;padding:.65em;margin:-1.3em 0 0 -1.3em;-webkit-box-shadow:0 0 2.5em rgba(0,0,0,.75);box-shadow:0 0 2.5em rgba(0,0,0,.75)}#imagelightbox-loading div{width:1.3em;height:1.3em;background-color:#fff;-webkit-animation:imagelightbox-loading .5s ease infinite;animation:imagelightbox-loading .5s ease infinite}@-webkit-keyframes imagelightbox-loading{from,to{opacity:.5;-webkit-transform:scale(.75);transform:scale(.75)}50%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes imagelightbox-loading{from,to{opacity:.5;-webkit-transform:scale(.75);transform:scale(.75)}50%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}#imagelightbox-overlay{background-color:#fff;background-color:rgba(255,255,255,.9);position:fixed;z-index:9998;top:0;right:0;bottom:0;left:0}#imagelightbox-close{cursor:pointer;width:2.5em;height:2.5em;background-color:#666;position:fixed;z-index:10002;top:2.5em;right:2.5em;border-radius:50%;-webkit-transition:color .3s ease;transition:color .3s...

JavaScript

/*src file "imagelightbox.min.js" */
!function(t,i,n,e){"use strict";var o=t("<div/>").attr("id","imagelightbox-loading").append(t("<div/>")),a=t("<button/>",{type:"button",class:"imagelightbox-arrow imagelightbox-arrow-left"}),r=t("<button/>",{type:"button",class:"imagelightbox-arrow imagelightbox-arrow-right"}),l=a.add(r),c=t("<div/>",{id:"imagelightbox-caption"}),u=t("<a/>",{id:"imagelightbox-close"}),f=t("<div/>",{id:"imagelightbox-overlay"}),d=t("<a/>",{href:"#",class:"imagelightbox-navitem"}),s=t("<div/>",{id:"imagelightbox-nav"}),g=t("<div/>",{id:"imagelightbox-wrapper"}),h=function(){var t=n.body||n.documentElement;return t=t.style,""===t.WebkitTransition?"-webkit-":""===t.MozTransition?"-moz-":""===t.OTransition?"-o-":""===t.transition&&""},p=h()!==!1,v=function(t,i,n){var e={},o=h();e[o+"transform"]="translateX("+i+")",e[o+"transition"]=o+"transform "+n+"s linear",t.css(e)},b="ontouchstart"in i,m=i.navigator.pointerEnabled||i.navigator.msPointerEnabled,x=function(t){if(b)return!0;if(!m||"undefined"==typeof t||"undefined"==typeof t.pointerType)return!1;if("undefined"!=typeof t.MSPOINTER_TYPE_MOUSE){if(t.MSPOINTER_TYPE_MOUSE!==t.pointerType)return!0}else if("mouse"!==t.pointerType)return!0;return!1};t.fn.imageLightbox=function(e){var a=t.extend({selector:"a[data-imagelightbox]",id:"imagelightbox",allowedTypes:"png|jpg|jpeg|gif",animationSpeed:250,activity:!1,arrows:!1,button:!1,caption:!1,enableKeyboard:!0,lockBody:!1,navigation:!1,overlay:!1,preloadNext:!0,quitOnEnd:!1,quitOnImgClick:!1,quitOnDocClick:!0,quitOnEscKey:!0},e),r=function(){a.arrows&&X(this),a.navigation&&P(this,a.selector),a.overlay&&T(),a.button&&I(),a.lockBody&&S(!0)},h=function(){N=t([]),g.remove().find("*").remove(),a.lockBody&&S(!1)},y=function(){a.activity&&q(),a.caption&&M()},w=function(){a.activity&&O(),a.arrows&&l.css("display","block"),a.navigation&&D(a.selector),a.caption&&C()},k=function(){g.trigger("previous.ilb2");var t=N.index(j)-1;if(t<0){if(a.quitOnEnd===!0)return...