JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
      <ul class="photoGallery clearfix">
        <li><img width="200" height="200" src="img/01.jpg" alt="Hay Bales" title="I love hay bales. Took this snap on a drive through the countryside past some straw fields."></li>
        <li><img width="200" height="200" src="img/02.jpg" alt="Lake" title="The lake was so calm today. We had a great view of the snow on the mountains from here."></li>
        <li><img width="200" height="200" src="img/03.jpg" alt="Canyon" title="I hiked to the top of the mountain and got this picture of the canyon and trees below."></li>
        <li><img width="200" height="200" src="img/04.jpg" alt="Iceburg" title="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."></li>

CSS

.container {
  margin: 0 auto;
  text-align: center;
  background: #d3d3d3;
}


.photoGallery {
  width: 980px;
  margin: 0 auto;
  padding: 0 auto;
  background: #fff;
  padding-top: 5px;
  box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
}

.photoGallery li {
  float: left;
  list-style: none;
  margin-right: 30px;
  margin-bottom: 30px;
}

.photoGallery img {
  z-index: 1;
  border-radius: 5px;
  cursor: pointer;
}

img:nth-child(3n+4) {
  clear: left
}

/* Clearfix */

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* JS Selectors */

.arrow-right,
.arrow-left {
  cursor: pointer;
  position: fixed;
  top: 32%;
  width: 15px;
  height: 10px;
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
}

.arrow-right {
  right: 20%;
	border-left: 60px solid darkgrey;
}

.arrow-left {
  left: 20%;
	border-right: 60px solid darkgrey; 
}

JavaScript

var $overlay = $('<div class="overlay"></div>');
var $image = $("<img>");
var $search = $("#filter");
var $caption = $("<p></p>");
var $nextArrow = $('<div class="arrow-right"></div>');
var $prevArrow = $('<div class="arrow-left"></div>');

// append image
$overlay.append($image);
// append caption
$overlay.append($caption);
// append arrows 
$overlay.append($nextArrow);
$overlay.append($prevArrow);

// append overlay
$("body").append($overlay);

// click on link
$(".photoGallery img").click(function(event) {
  //stop default action
  event.preventDefault();
  var imgLocation = $(this).attr("src");
  $image.attr("src", imgLocation);
  $(this).parent().addClass("selected");
  
  $overlay.fadeIn("fast");
  // show lightbox
  var captionText = $(this).attr("title");
  $caption.text(captionText);
});