JSFiddle - React, Tailwind, and code Playground

HTML

<div id="iGallery">
    <ul>
        <li><a href="http://placehold.it/500x350"><img src="http://placehold.it/500x350" alt="Funky roots" /></a>
        </li>
        <li><a href="http://placehold.it/500x350"><img src="http://placehold.it/500x350" alt="The long and winding road" /></a>
        </li>
        <li><a href="http://placehold.it/500x350"><img src="http://placehold.it/500x350" alt="The long and winding road" /></a>
        </li>
    </ul>
</div>

CSS

#iGallery {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
#iGallery ul {
    list-style: none;
    left: 0;
    right: 0;
}
#iGallery li {
    float: left;
}
#iGallery li img {
    margin-right: 20px;
    max-width: 150px;
    height: 150px;
}
#overlay {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    text-align: center;
}
#overlay img {
    max-width: 65%;
    max-height: 65%;
    margin-top: 10%;
}

JavaScript

// Image Gallery JavaScript
var $overlay = $('<div id="overlay"></div>');
var $navi = $('<div id="navi">');
var $next = $('<span class="next"></span>');
var $prev = $('<span class="prev"></span>');
var $image = $("<img>");
var $caption = $('<p></p>');

$overlay.append($image);
$overlay.append($caption);
$("body").append($overlay);

$navi.append($prev);
$navi.append($next);
$("body").append($navi);

$("#iGallery a").click(function (event) {
    event.preventDefault();
    var imageLocation = $(this).attr("href");
    // Update Overlay with the clicked image
    $image.attr("src", imageLocation);
    $overlay.show();
    //Get image alt attribute and display on the image
    var captionText = $(this).children("img").attr("alt");
    $caption.text(captionText);
});

// Hide image by clicking on overlay

$overlay.click(function () {
    $overlay.hide();
});