JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<div id="emailverification" style="display:none;">
    <div style="width: 100%;float:left;background-color: #E4E5EA;">
        
        <div style=" font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 17px;">Click the link in the email we have sent to</div>        
        <div style="text-align:center; margin-bottom: 17px;"><a href="logout" style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;">logout</a></div>
        <div style=" font-size: 14px; font-weight: bold; text-align: center;margin-bottom: 17px;">to complete your registration.</div>    
        <div style=" font-size: 14px; text-align: center;margin-bottom: 17px;"><span style="color: #00A8EC; font-weight: bold;padding-left: 5px;padding-right: 5px;">Resend confirmation email <span style="color:#000;">|</span> Change email address</span></div>        
   </div>    
</div>

JavaScript

$(document).ready(function() {
            $("#emailverification").fancybox({
             closeClick  : false, // prevents closing when clicking INSIDE fancybox 
             openEffect  : 'none',
             closeEffect : 'none',             
             closeBtn : false,             
//             keys : {
//                close  : null
//             },
             helpers   : { 
              overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
             }
            }).trigger("click");
        });