JSFiddle - React, Tailwind, and code Playground

by sachin377

HTML

<script src="http://sachinchoolur.github.io/lightGallery/light-gallery/js/lightGallery.js"></script>
<link rel="stylesheet" href="http://sachinchoolur.github.io/lightGallery/light-gallery/css/lightGallery.css">
<ul id="lightGallery">
    <li data-src="http://sachinchoolur.github.io/lightGallery/img/img1.jpg">
        <img src="http://sachinchoolur.github.io/lightGallery/img/thumb1.jpg" />
        <button class="delete" type="button">Delete</button>
    </li>
    <li data-src="http://sachinchoolur.github.io/lightGallery/img/img2.jpg">
        <img src="http://sachinchoolur.github.io/lightGallery/img/thumb2.jpg" />
        <button class="delete" type="button">Delete</button>
    </li>
    <li data-src="http://sachinchoolur.github.io/lightGallery/img/img3.jpg">
        <img src="http://sachinchoolur.github.io/lightGallery/img/thumb3.jpg" />
        <button class="delete" type="button">Delete</button>
    </li> 
    <li data-src="http://sachinchoolur.github.io/lightGallery/img/img4.jpg">
        <img src="http://sachinchoolur.github.io/lightGallery/img/thumb4.jpg" />
        <button class="delete" type="button">Delete</button>
    </li>
    <li data-src="http://sachinchoolur.github.io/lightGallery/img/img5.jpg">
        <img src="http://sachinchoolur.github.io/lightGallery/img/thumb5.jpg" />
        <button class="delete" type="button">Delete</button>
    </li> 
</ul>

CSS

ul{
    list-style: none outside none;
    padding-left: 0;
}
li {
    display: block;
    float: left;
    height: 100px;
    margin-bottom: 6px;
    margin-right: 6px;
    width: 100px;
}
button{
    cursor:pointer;
}

JavaScript

$('#lightGallery').lightGallery();
$('.delete').on('click',function(e){
    e.stopPropagation();   
    $(this).parent().remove();
})