JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <a class="popup-with-zoom-anim" href="#dialog">
        <span>CLICK HERE TO DISPLAY DIALOG</span>
    </a>
</div>

<div id="dialog" class="zoom-anim-dialog mfp-hide">
    <h1>DIALOG TITLE</h1>
    <br><br>
    <p>Dialog text</p>
</div>

CSS

/* Styles for dialog window */
#dialog {
background: white;
padding: 20px 30px;
text-align: left;
max-width: 700px;
position: relative;
box-shadow: 1px 1px 10px 5px rgba(0,0,0,0.25);
left: 50%;
right: 50%;
z-index: 999;
top: 100px
}

/**
* Fade-zoom animation
*/

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
display:block;
opacity: 0;

-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 

-webkit-transform: scale(0.8); 
-moz-transform: scale(0.8); 
-ms-transform: scale(0.8); 
-o-transform: scale(0.8); 
transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
opacity: 1;

-webkit-transform: scale(1); 
-moz-transform: scale(1); 
-ms-transform: scale(1); 
-o-transform: scale(1); 
transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
-webkit-transform: scale(0.8); 
-moz-transform: scale(0.8); 
-ms-transform: scale(0.8); 
-o-transform: scale(0.8); 
transform: scale(0.8); 

opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out; 
-moz-transition: opacity 0.3s ease-out; 
-o-transition: opacity 0.3s ease-out; 
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}

JavaScript

$(document).ready(function() {
    $('.popup-with-zoom-anim').magnificPopup({
        type: 'inline',
        fixedContentPos: false,
        fixedBgPos: true,
        overflowY: 'auto',
        closeBtnInside: true,
        preloader: false,
        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
    });
});