JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/css/style.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/css/prism.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<script src="http://kenwheeler.github.io/slick/js/scripts.js"></script>
<script src="http://kenwheeler.github.io/slick/js/prism.js"></script>
<a id="openLB" href="#">Click Here to show lightbox</a>

<div id="pageOverLay-shadow"></div>
<div id="pageOverLay">
    <div id="pageOverLayCloseBtn"><a href="#" onclick="pageOverLayClose();">X</a>
    </div>
     <h2>Images</h2>

    <div class="slider fade">
        <div>
            <div class="image">
                <img src="http://wowslider.com/sliders/demo-94/data1/images/photo1427806208781b36531cb09ef.jpg" />
            </div>
        </div>
        <div>
            <div class="image">
                <img src="http://wowslider.com/sliders/demo-94/data1/images/photo142855067022515f007f6f1ba.jpg" />
            </div>
        </div>
        <div>
            <div class="image">
                <img src="http://wowslider.com/sliders/demo-94/data1/images/photo1428452788387375d846a8ab4.jpg" />
            </div>
        </div>
    </div>
</div>

CSS

#pageOverLay {
    background: #fff none repeat scroll 0 0;
    margin-left: 43%;
    margin-top: 10%;
    position: absolute;
    width: 500px;
    z-index: 1001;
    display:none;
}
#pageOverLay-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    z-index: 1000;
    display: none;
}
#pageOverLayCloseBtn {
    position:absolute;
    top:0;
    right:0;
}
.slick-slider {
    margin: 30px auto 50px;
}
.slick-slider {
    -moz-user-select: none;
    box-sizing: border-box;
    display: block;
    position: relative;
}

JavaScript

$("#openLB").on("mousedown","",showLightBox);

function showLightBox() {
     $("#pageOverLay-shadow").css("display", "block");
     $("#pageOverLay").css("display", "block");

 }

 function pageOverLayClose() {
     $("#pageOverLay-shadow").css("display", "none");
     $("#pageOverLay").css("display", "none");
 }
 var disqus_shortname = 'slickcarousel';

 (function () {
     var dsq = document.createElement('script');
     dsq.type = 'text/javascript';
     dsq.async = true;
     dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
 })();