JSFiddle - React, Tailwind, and code Playground

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</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>description and more</p></div>
</div>

CSS

body {padding: 25px;}
.content, .descr { border: 4px solid black;}
.mfp-close:after {content: "X"; color: orange;}
.descr{ height: 50px;}
.content {
	margin: 0 auto;
	position: relative;
	/*max-height: 100vh;*/
	max-width: 400px;
	background-color: #fff;
}

.image img {
  display: block;
  max-height: calc(100vh - 50px);
	max-width: 400px;
	height: 100%;
}

JavaScript

$(document).ready(function() {

$('.preview').each(function() {
		$(this).magnificPopup({
			delegate: 'a',
			type: 'inline',
			verticalFit: true,
			gallery: {enabled:true},
			midClick: true,
			removalDelay: 300,
			mainClass: 'mfp-scale',
		});
	});

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