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(0);" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></a>
 <a onclick="showLightBox(1);" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/></a>
 <a onclick="showLightBox(2);" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/></a>

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(state) {
      $("#black-cover").css("visibility", "visible");
      $("#cover-page").css("visibility", "visible");
      $(".slick-slider").css("visibility", "visible");
      $(".slider").slick("slickGoTo", state);
  }

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

  }