JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css">
<div class="tile">
    <div class="mfp-hide tile-info"><p>One</p></div>
</div>

<div class="tile">
    <div class="mfp-hide tile-info"><p>Two</p></div>
</div>

<div class="tile">
    <div class="mfp-hide tile-info"><p>Three</p></div>
</div>

<div class="tile">
    <div class="mfp-hide tile-info"><p>Four</p></div>
</div>

CSS

.tile {
    width: 100px;
    height: 100px;
    background: #333;
    margin: 10px;
    float: left;
}

.mfp-content {
    width: 200px;
    text-align: center;
}

JavaScript

$('.tile').magnificPopup({
    items: {
      src: '.tile-info',
    },
    type: 'inline'
});