JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lightgallery.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-fullscreen.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-autoplay.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-zoom.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-hash.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-pager.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/external/jquery.mousewheel.min.js"></script>
<link rel="stylesheet" href="http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css">
<div class="demo">
    <ul id="lightgallery">
        <li data-custom-class="custom-class1" data-src="http://sachinchoolur.github.io/lightGallery/static/img/1-1600.jpg"> <a href="">
          <img class="img-responsive" src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg">
        </a>

        </li>
        <li data-custom-class="custom-class2" data-src="http://sachinchoolur.github.io/lightGallery/static/img/2-1600.jpg"> <a href="">
          <img class="img-responsive" src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-2.jpg">
        </a>

        </li>
        <li data-custom-class="custom-class3" data-src="http://sachinchoolur.github.io/lightGallery/static/img/13-1600.jpg"> <a href="">
          <img class="img-responsive" src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-13.jpg">
        </a>

        </li>
        <li data-custom-class="custom-class4" data-src="http://sachinchoolur.github.io/lightGallery/static/img/4-1600.jpg"> <a href="">
          <img class="img-responsive"...

CSS

.demo ul {
    padding-left:0
}
.demo li {
    list-style: outside none none;
    width: 200px;
    float: left;
    display: block;
    overflow: hidden;
    margin-right:10px;
    margin-bottom: 10px;
}
.demo li img {
    height: auto;
    max-width:100%
}

JavaScript

var $lg = $('#lightgallery');

$lg.lightGallery({
    pager: false
});
var data = $lg.data('lightGallery');

$lg.on('onAferAppendSlide.lg', function (event, index) {
    var classToAdd = data.$items.eq(index).attr('data-custom-class');
    data.$slide.eq(index).find('.lg-image').addClass(classToAdd);
});