JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<ul class="gallery">
    <li><a rel="gallery1" href="http://dummyimage.com/800x600.jpg&text=1A-large"><img src="http://dummyimage.com/100x100&text=1A-thumb"></a></li>
    <li><a rel="gallery1" href="http://dummyimage.com/800x600.jpg&text=1B-large"><img src="http://dummyimage.com/100x100&text=1B-thumb"></a></li>
    <li><a rel="gallery1" href="http://dummyimage.com/800x600.jpg&text=1C-large"><img src="http://dummyimage.com/100x100&text=1C-thumb"></a></li>
    <li><a rel="gallery1" href="http://dummyimage.com/800x600.jpg&text=1D-large"><img src="http://dummyimage.com/100x100&text=1D-thumb"></a></li>
</ul>

<ul class="gallery">
    <li><a rel="gallery2" href="http://dummyimage.com/800x600.jpg&text=2A-large"><img src="http://dummyimage.com/100x100&text=2A-thumb"></a></li>
    <li><a rel="gallery2" href="http://dummyimage.com/800x600.jpg&text=2B-large"><img src="http://dummyimage.com/100x100&text=2B-thumb"></a></li>
    <li><a rel="gallery2" href="http://dummyimage.com/800x600.jpg&text=2C-large"><img src="http://dummyimage.com/100x100&text=2C-thumb"></a></li>
    <li><a rel="gallery2" href="http://dummyimage.com/800x600.jpg&text=2D-large"><img src="http://dummyimage.com/100x100&text=2D-thumb"></a></li>
</ul>

CSS

/* Only show the first thumbnail */
.gallery li { display:none; }
.gallery li:first-child { display:block; }

JavaScript

// For browsers that don't understand :first-child in native CSS
$('.gallery li:first-child').siblings().hide();

// Lightbox!
$('.gallery a').fancybox();