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="popup-modal" 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>
        
</div>

CSS

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

JavaScript

$('.popup-modal').magnificPopup({
   
    type: 'inline',
    modal: false,

});

$(document).on('click', '.closePopup', function (e) 
            {
                e.preventDefault();
                $.magnificPopup.close();
            });