JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cpoutter">


                <div class="cplightbox">
                    <div class ="cplightboxclose"></div>
                    <div class="cplightbox1">

                    </div>
                   
                </div>

            </div>
<a href="http://www.google.com/images/srpr/logo4w.png"><img src="http://www.google.com/images/srpr/logo4w.png" /></a>
<a href="http://www.bing.com/az/hprichbg/rb/IledOlonneSalt_ROW9113926693_1366x768.jpg"><img src="http://www.bing.com/s/a/hpc8.png"/></a>

CSS

.cplightbox
                {
                    margin-left: auto;
                    margin-right:auto;
                    width:auto;
                    height:auto;
                    
                    display:inline-block;
                }
        
  

            .cplightbox1 {
                background-color:#FFF;
                padding: 5px;
            }

            .cplightbox1 img
            {

                cursor:pointer;
                max-width:440px;
                max-height:380px;

            }
            .cpoutter
            {
                position:fixed;
                top:0px;
                left:0px;
                filter:alpha(opacity=0);/* for IE */
                opacity: .0;
                width:100%;
                height:100%;
                background:rgba(204,204,204,0.5);
                z-index:70;
                display:none;
                text-align:center;


            }

JavaScript

jQuery("img").click(function() {
                      var img_path;               
        if ($(this).parent('a').length) {
                 
                       img_path = $(this).parent('a').prop('href');
                        }
                    else
                        {
                     img_path = $(this).attr('src');
                        }
                    
                    jQuery(".cplightbox1").html(jQuery("<img>").attr("src", img_path));
                    jQuery(".cpoutter").css('display', 'block');
                    jQuery('.cpoutter').animate({'opacity': '1'});
                    
                    var cplightbox = document.getElementsByClassName('cplightbox')[0];
                    var cpoutter = document.getElementsByClassName('cpoutter')[0];
                    cplightbox.style.marginTop = ((cpoutter.offsetHeight / 2) - (cplightbox.offsetHeight / 2)) + "px";
                    return false;
                });
 jQuery(".cpoutter").click(function()
                    {
                        jQuery(".cpoutter").stop().fadeOut('medium');
                    });