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/slick/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/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>
<div id="black-cover"></div>
<div id="cover-page">
    <div id="close"><a id="lightboxCloseBtn" href="#" onclick="closeBtn();">X</a>
    </div>
     <h2 id="lightboxHeader">Images</h2>

    <div class="slider fade">
        <div class="lightbox-image">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-" />
        </div>
        <div class="lightbox-image">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY" />
        </div>
        <div class="lightbox-image">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ" />
        </div>
    </div>
</div> <a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-');" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></a>
 <a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY');" href="#"><img...

CSS

#cover-page {
    background: #fff none repeat scroll 0 0;
    margin-left: 15%;
    margin-top: 1%;
    position: absolute;
    width: 70%;
    z-index: 1001;
    visibility:hidden;
}
#black-cover {
    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;
    visibility:hidden;
}
#close {
    position:absolute;
    top:0;
    right:0;
    visibility:inherit;
}
.slick-slider {
    margin-left: 12%;
    margin-right: 9%;
}
.slick-slider {
    -moz-user-select: none;
    box-sizing: border-box;
    visibility:hidden;
    position: relative;
}
.slick-slide img {
    border: 5px solid #fff;
    display: block;
    width: 100%;
}
.slick-next {
    right: -66px;
}
.slick-prev {
    left: -66px;
}
.slick-slide.slick-current.slick-active {
    left: 0;
    opacity: 1;
    position: relative;
    top: 0;
    width: 25%;
    z-index: 999;
}

JavaScript

function showLightBox(address) {
    $("#black-cover").css("visibility", "visible");
    $("#cover-page").css("visibility", "visible");
    $(".slick-slider").css("visibility", "visible");

    // find the image with the same address
    var index = 0;
    var notFound = true;

    $('.lightbox-image > img').each(function () {
        var sameAddress = $(this).attr('src') == address;
        if (notFound && !sameAddress) index++;
        else notFound = false;
    });

    // Set initial slide
    $('.slick-slider').slick('slickGoTo', index, true);
}

function closeBtn() {
    $("#black-cover").css("visibility", "hidden");
    $("#cover-page").css("visibility", "hidden");
    $(".slick-slider").css("visibility", "hidden");

}

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);
})();