JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<button class="ajax-call" href="#test-modal">Popup</button>
<div id="test-modal" class="mfp-hide white-popup">
    <p>Popup Main Content Container</p>
    <p>
        <button class="closePopup">Close</button></p>
</div>

CSS

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

JavaScript

function openPopup(el) {
   
    $('.'+el).magnificPopup({
        type: 'inline',
        modal: false
    });
}

$(function () {
    $('.ajax-call').click(function (e) {
        openPopup(this.className);
    });
    $(document).on('click', '.closePopup', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});