JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.css">
<script src="http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>
<a class="fancybox" title="one" href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg"><img alt="example1" src="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_m.jpg" />
</a>

<a class="fancybox" title="two" href="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_b.jpg">
    <img alt="example2" src="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_m.jpg" />
    </a>

<a class="fancybox" title="three" href="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_b.jpg">
    <img alt="example3" src="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_m.jpg" />
    </a>

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
a img {
    float: left;
    max-height: 100px;
    margin: 2px;
}

JavaScript

$(".fancybox").attr("rel", "gallery").fancybox({
    titlePosition: "over"
});