JSFiddle - React, Tailwind, and code Playground

by DSDmark

HTML

<link rel="stylesheet" href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.css">
<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.js"></script>
<link rel="stylesheet" href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.gallery.css">
<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.gallery.js"></script>
<a href="https://www.barnes-history.org.uk/Gill Map/testmap.html" data-featherlight="iframe" data-featherlight-iframe-height="575" data-featherlight-iframe-width="800" data-featherlight-iframe-scrolling="auto"><span>The Growth of East Sheen in the Victorian Era</span></a>
<br><br>


  <a href="https://www.barnes-history.org.uk/Bombmap/mappage.html" data-featherlight="iframe" data-featherlight-iframe-height="800" data-featherlight-iframe-width="800" data-featherlight-iframe-scrolling="auto"><span>World War II Bombs in Barnes, Mortlake and East Sheen</span></a>



<br><br><br><br><br><br><br><br><br><br><br><br>
<h1>code left from example using fiddle advised by featherlight https://github.com/noelboss/featherlight/#installation</h1>
<a href="http://farm5.staticflickr.com/4069/4563624740_93430bb907_b.jpg" data-featherlight>Nice image</a>

<hr>

<a href=".inline" data-featherlight>Inline</a>

<div class="inline">Hello, world</div>

<hr>

<h3>Gallery</h3>
<div data-featherlight-gallery data-featherlight-filter="a">
  <a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
  <a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg"><img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /></a>
  <a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg"><img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /></a>
</div>

CSS

.inline { display: none }

	.featherlight-iframe .featherlight-content{
		/* dimensions: 1140px prevents iframe from spanning the full width of the browser */
		width: 80%;
		max-width: 1140px;

		/* spacing */
		margin: 0;
		padding: 0;
	}

	.featherlight-iframe .featherlight-inner{
		/* positioning */
		display: block;
		float: left;
		position: relative;

		/* dimensions */
    
		width: 100%;
	}
	.featherlight .featherlight-inner:after{
		/* dimensions */
		content: "";
		float: left;
		width: 80%;
    height:80%;
		padding-top: 57%;
		display: block;
		position: relative;
	}
}