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");
      		var index = $('.lightbox-image.slick-slide > img[src="' + address + '"]').parent().index();
      		$('ul.slick-dots > li').eq(index).find('button').click();
      }

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