JSFiddle - React, Tailwind, and code Playground

by Mrt Ja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.css">
<div class="preview">
	<a href="#no-01">show inline content 1</a>
</div>
<!-- ........................................................................... linked content -->	
<div id="no-01" class="content mfp-hide">
	<div class="image"><img src="http://atbreak.com/dude/very%20high%20building.jpg"></div>
	<div class="descr"><p>...</p></div>
</div>
<div class="preview">
	<a href="#no-02">show inline content 2</a>
</div>
<!-- ........................................................................... linked content -->	
<div id="no-02" class="content mfp-hide">
	<div class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Chicago_Downtown_Panorama.jpg"></div>
	<div class="descr"><p>...</p></div>
</div>

CSS

body {padding: 25px;}
.content, .descr { border: 4px solid black;}
.mfp-close:after {content: "X"; color: orange;}
.descr{ height: 50px;min-width: 384px;}
.content {
	margin: 0 auto;
  display: table;
	position: relative;
	background-color: #fff;
}
.image img {
  display: block;
	height: auto;
	width: auto;
  max-height: calc(100vh - 66px);
  max-width: calc(400px - 16px);
}
@media only screen and (max-width: 400px) {
	.image img {
	max-width: calc(100vw - 16px);
}
}

JavaScript

$(document).ready(function() {

$('.preview').each(function() {
		$(this).magnificPopup({
			delegate: 'a',
			type: 'inline',
			verticalFit: true,
		});
	});

	$.extend(true, $.magnificPopup.defaults, {
		closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>'
	});
  
});