JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css">
<button id="trigger">Trigger</button>
<div id="pg-preview-wrap">
  <div id="calendar-select">
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="flag-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='American Flag' class='pg-preview-img'>
          <p class="calendar-option-push"></p>
          <cite>A</cite>
        </label>
        <input type="checkbox" class="option-check" id='flag-option'>
      </div>
    </div>
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="nickel-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Brushed Nickel & Black' class='pg-preview-img'>
          <p class="calendar-option-push"></p>
          <cite>B</cite>
        </label>
        <input type="checkbox" class="option-check" id='nickel-option'>
      </div>
    </div>
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="gold-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Gold & Black' class='pg-preview-img'>
          <p class="calendar-option-push"></p>
          <cite>C</cite>
        </label>
        <input type="text" class="option-check" id='gold-option'>
      </div>
    </div>
  </div>
</div>

CSS

#pg-preview-wrap {
  display: none;
}

#calendar-select {
  width: 50%;
  margin: 0 auto 70px auto;
  background: #CCC;
  height: auto;
}

.no-fouc {
  display: none;
}

.slick-initialized {
  visibility: visible;
}

.slick-slide img.checkmark-img {
  display: none;
  width: 40%;
  height: auto;
  z-index: 1;
  cursor: pointer;
}

.slick-slide img.pg-preview-img {
  display: block;
}

.calendar-option img {
  margin: 20px auto;
  cursor: pointer;
  width: 50%;
  height: auto;
  display: block;
}

.calendar-option-push {
  width: 0;
  height: 20px;
  border: none;
  margin: 20px auto;
}

.calendar-option cite {
  text-align: center;
  font-size: 1.25rem;
  margin: auto;
  color: #303030;
  font-family: 'Lato', sans-serif;
  display: block;
}

.slick-prev,
.slick-next {
  background-repeat: no-repeat;
  background-size: 120px 120px;
  height: 120px;
  width: 120px;
}

.slick-prev {
  left: -130px;
  background-image: url("images/arrow-back.png");
}

.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus {
  background-image: url("images/arrow-back.png");
}

.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus,
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
  background-repeat: no-repeat;
  background-size: 120px 120px;
}

.slick-next {
  right: -130px;
  background-image: url("images/arrow-forward.png");
}

.slick-next:hover,
.slick-next:active,
.slick-next:focus {
  background-image: url("images/arrow-forward.png");
}

.slick-prev:before,
.slick-next:before {
  font-size: 0px;
}

.slick-dots {
  margin: 15px 0 20px 0;
}

.white-back {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background: #FFF;
}

JavaScript

var options = {
  dots: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 7000,
  speed: 800,
  slidesToShow: 1,
  adaptiveHeight: true
}
$('#trigger').on('click', function() {
	$('#pg-preview-wrap').show();
  $('#calendar-select').slick('unslick');
  $('#calendar-select').slick(options);
});
$('#calendar-select').on('init', function() {
  //$('#calendar-select').css("visibility", "visible");
  //$('.slick-initialized').css("visibility", "visible");
});
$('#calendar-select').slick(options);