JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div data-fancybox-group="gallery" class="fancybox" data-fancybox-href="#inline1">open first fancybox item</div>
<br />
<div data-fancybox-group="gallery" class="fancybox" data-fancybox-href="#inline2">open second item</div>
<div style="display: none;">
<div id="inline1"><p>Inline 01</p><p>Lorem Ipsum</p></div>
<div id="inline2"><p>Inline 02</p><p>Ipsum Lorem</p></div>
</div>

CSS

.fancybox {cursor: pointer}

JavaScript

$(".fancybox").fancybox({
    minWidth: 350
});