JSFiddle - React, Tailwind, and code Playground

by rigids

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 id="page">
	<div id="examples" class="block">
		<div class="fancybox-gallery" data-fancybox-group="gallery" id="inline" style="display:none;width:500px;">
			<h2>Lorem ipsum dolor sit amet</h2>		
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>	
		<div class="fancybox-gallery" data-fancybox-group="gallery" id="inline2" style="display:none;width:500px;">
			<h2>TEST TEST TEST TEST TEST TEST</h2>		
			<p>consectetur adipiscing elit. consectetur adipiscing elit.consectetur adipiscing elit.</p>
		</div>	
		<div class="tab_container">
			<div>
				<ul class="list">			
					<li><a class="various" href="#inline">Inline</a></li>			
					<li><a class="various" href="#inline2">Inline2</a></li>			
				</ul>
			</div>
		</div>
	</div>
	</div>

JavaScript

$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 800,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});