JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<div class="highslide-gallery">
    <a href="http://highslide.com/samples/gallery3.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions, {url: 'http://highslide.com/'})">
        <img src="http://highslide.com/samples/gallery3.thumb.jpg" alt="Caption Text" />
    </a>
    <a href="http://highslide.com/samples/gallery5.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions, {url: 'http://highslide.com/ref/'})">
        <img src="http://highslide.com/samples/gallery5.thumb.jpg" alt="Caption Text" />
    </a>
    <a href="http://highslide.com/samples/gallery7.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions, {url: 'http://highslide.com/editor/'})">
        <img src="http://highslide.com/samples/gallery7.thumb.jpg" alt="Caption Text" />
    </a>
</div>

JavaScript

// regular iframe in overlay on top of the image onImageClick
// requires highslide-full.js and jQuery

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.marginBottom = 115;
hs.restoreTitle = 'Click for HTML popup. Click and drag to move image, use arrow keys for next and previous image.';
hs.restoreCursor = null;

var galleryOptions = {
    dimmingOpacity: 0.8,
    align: 'center',
    captionEval: 'this.thumb.alt'
};

hs.Expander.prototype.onImageClick = function (sender) {
    $('<iframe src="'+this.custom.url+'" frameborder="0"></iframe>').css({
        position: 'absolute',
        top: '0',
        height: '100%',
        width: '100%',
        background: '#fff',
        zIndex: 20
    }).appendTo(sender.wrapper);
    return false;
};

hs.addSlideshow({
	interval: 5000,
	repeat: true,
	useControls: true,
	overlayOptions: {
		className: 'text-controls',
		position: 'bottom center',
		relativeTo: 'viewport',
		offsetY: -65
	},
	thumbstrip: {
		position: 'bottom center',
		mode: 'horizontal',
		relativeTo: 'viewport'
	}
});