JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
<div class="demo">
    <ul id="lightGallery">
        <li data-src="https://sachinchoolur.github.io/lightGallery/static/img/1.jpg">
            <img src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg" />
        </li>
        <li style="display:none" data-src="https://sachinchoolur.github.io/lightGallery/static/img/2.jpg">
            <img src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-2.jpg" />
        </li>
        <li style="display:none" data-src="https://sachinchoolur.github.io/lightGallery/static/img/3.jpg">
            <img src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-3.jpg" />
        </li>
        <li style="display:none" data-src="https://sachinchoolur.github.io/lightGallery/static/img/4.jpg">
            <img src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-4.jpg" />
        </li>
    </ul>
</div>

CSS

.demo {
    width:100%;
    height:150px;
}
ul {
    list-style: none outside none;
    padding-left: 0;
}
li {
    display: block;
    float: left;
    height: 100px;
    margin-bottom: 6px;
    margin-right: 6px;
    width: 100px;
}

JavaScript

$('#lightGallery').lightGallery();