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">
<a class="fancybox" href="http://ep.yimg.com/ay/chefknivestogo/nubatama-240mm-wa-gyuto-47.png"><img src="http://ep.yimg.com/ay/chefknivestogo/nubatama-240mm-wa-gyuto-41.png" alt=""/></a>

<a class="fancybox" href="http://ep.yimg.com/ay/chefknivestogo/nubatama-240mm-wa-gyuto-56.png"><img src="http://ep.yimg.com/ay/chefknivestogo/nubatama-240mm-wa-gyuto-55.png" alt=""/></a>

CSS

.fancybox-close {
    top: 0;
    right: 0;
}

JavaScript

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding    : 0,
        margin     : 5,
        nextEffect : 'fade',
        prevEffect : 'none',
        autoCenter : false,
        afterLoad  : function () {
            $.extend(this, {
                aspectRatio : false,
                type    : 'html',
                width   : '100%',
                height  : '100%',
                content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
            });
        }
    });