JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<link rel="stylesheet" href="https://cdn2.hubspot.net/hubfs/2480790/Assets%202017/fancybox/jquery.fancybox.min.css">
<div class="premium-module">


<a class="fancy-wrapper unlock-cta fancybox" data-fancybox="fancy-modules" href="https://cdn2.hubspot.net/hubfs/346178/designmodo/generator/components/900/header-15.jpg" style="
    display:  block;
    z-index:  999999;
"><img class="prev-image" src="https://cdn2.hubspot.net/hubfs/346178/designmodo/generator/components/270/header-15.jpg"></a>

</div>

JavaScript

/* Preview Feature for the Basic users */
         var activeElem = null;
         $(".premium-module").children(".fancy-wrapper.fancybox").fancybox({
            		helpers: {
            			title: {
            				type: 'inside'
            			}
            		},
            		caption: function() {
            			return "<a class='fancybox-download' href='https://w.inboundlabs.co/startup-framework/get-full' target='_blank'>Unlock Module</a>";
            		},
            		afterShow: function(instance, current) {
            			activeElem = current.opts.$orig;
            		}
            
    	});