JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.css">
<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.js"></script>
<link rel="stylesheet" href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.gallery.css">
<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.gallery.js"></script>
<h3>Gallery</h3>
<div class="my-gallery">
  <a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg" alt="Two birds"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
  <a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg" alt="Beads"><img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /></a>
  <a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg" alt="Feathers"><img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /></a>
</div>

CSS

.inline { display: none }
.featherlight .legend {
    position: absolute;
    bottom: 20;
    font-size: larger;
    color: white;
}

JavaScript

$('.my-gallery').featherlightGallery({
    filter: "a",
    afterContent: function() {
        this.$legend = this.$legend || $('<div class="legend"/>').insertAfter(this.$content);
        this.$legend.text(this.$currentTarget.attr('alt'));
    }
});