JSFiddle - React, Tailwind, and code Playground

by Kabeer Rifaye

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<script src="http://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;">
                <a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="resendemail">Resend confirmation email </a>
                <span style="color:#000;">|</span>
                <a style="color: #00A8EC;text-decoration: underline; font-weight: bold; padding: 4px; border-radius: 10px; margin-top: 10px;margin-left: 0px !important;" id="addbtn">Change email address</a>                
                <div class="input_add" style="margin-top: 30px;display: none;">                    
                    <input type="text" name="email" style="padding-top: 4px !important;" >
                    <button style="background-color: #00A8EC;height: 30px;box-shadow: none;border: 1px solid #00A8EC;color: #fff;">Submit</button>                    
                </div>
            </span>   </div>        
   </div>    
</div>

JavaScript

$(document).ready(function() {
        $("#emailverification").fancybox({
         closeClick  : true, // 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");

        $('#logout').click(function(){
            window.location="<?php echo site_url(); ?>home/logout";                
        });

        $('#addbtn').click(function(){
            $(".input_add").toggle(); //add input box                                 
        });   

        $( "#resendemail" ).click(function() {
            //code here...
        });
    });