JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://s3.amazonaws.com/dimsemenov-static/dist/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/dimsemenov-static/dist/magnific-popup.css">
<a href="#test-pop" class="open-popup-link">1st link</a>

<a id="test-pop" class="white-popup mfp-hide">
  <p>First popup content</p>
</a>

<br>

CSS

.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width:auto;
    max-width: 500px;
    margin: 20px auto;
    display: block;
}
.mfp-hide {
    display: none;
}

JavaScript

$('.open-popup-link').magnificPopup({
    type: 'inline',
    callbacks: {
        beforeOpen: function () {
            alert(this.ev.get(0).className);
        },
        open: function () {
            alert(this.ev.get(0).id);
        }
    }
});