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 id="pd53" class="fancy-detail-page" href="#nogo">open product detail</a>

<div id="c53" style="display: none">
    <div class="product-details">
        <p>Lorem Ipsum</p>
    </div>
</div>

JavaScript

$(".fancy-detail-page").fancybox({
    padding: 0,
    openEffect: 'none',
    closeEffect: 'none',
    maxWidth: 960,
    beforeLoad : function () {
        var id = $(this.element).attr("id").replace("pd", "c");
        this.content = $('#' + id + ' .product-details');
    }
});