JSFiddle - React, Tailwind, and code Playground

by elcoyote67

HTML

<script src="https://ontraport.com/wp-content/themes/ontraport/js/fancybox/jquery.fancybox-thumbs.js"></script>
<link rel="stylesheet" href="https://ontraport.com/wp-content/themes/ontraport/css/fancybox/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="https://ontraport.com/wp-content/themes/ontraport/css/fancybox/jquery.fancybox.css">
<script src="https://ontraport.com/wp-content/themes/ontraport/js/fancybox/jquery.fancybox.js"></script>
<body background="https://sites.google.com/a/sendpepper.com/3-0-documentation/home/bg.png">
    
    <table border="0" bordercolor="#eeeeee" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#575757" colspan="2" height="30" style="padding-left:20px" valign="middle"><font color="#ffffff" face="'Arial Black', Gadget, sans-serif" size="4"><b>
<div style="display:block;text-align:left"><b>User adds email account</b></div>
</b></font></td>
</tr>
</tbody>
</table>
    <br>
<a class="fancybox" href="https://sites.google.com/a/ontraport.com/3-0-documentation/imap-email-import/1_Adding-an-Email-Account.png" ><img src="https://sites.google.com/a/ontraport.com/3-0-documentation/imap-email-import/1_Adding-an-Email-Account.png" width="488" height="345" style="border: 2px solid #575757;" alt=""/></a>

<a class="fancybox" href="https://sites.google.com/a/ontraport.com/3-0-documentation/imap-email-import/2_Adding-an-Email-Account.png"><img src="https://sites.google.com/a/ontraport.com/3-0-documentation/imap-email-import/2_Adding-an-Email-Account.png" width="488" height="345" style="border: 2px solid #575757;" alt=""/></a>
    
    
<a class="fancybox" href="https://sites.google.com/a/ontraport.com/3-0-documentation/imap-email-import/3_Adding-an-Email-Account.png"><img src="https://sites.google.com/a/ontraport.com/3-0-documentation/imap-email-import/3_Adding-an-Email-Account.png" width="488" height="345" style="border: 2px solid #575757;" alt=""/></a>

   
    
    
  <a class="fancybox"...

CSS

.fancybox-close {
    top: 0;
    right: 0;
}

JavaScript

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        helpers: {
            thumbs: {
                width  : 40,
                height : 40,
                source  : function(current) {
                    return $(current.element).data('thumbnail');
                }
            }
        }
    });