JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

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">
<input type="checkbox" class="calendar-check" id="cal-1">
<input type="checkbox" class="calendar-check" id="cal-2">
<div id="pg-preview-wrap">
  <div class="calendar-select" id="slider-2yr">
    <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'>
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
          <p class="calendar-option-push"></p>
          <cite>AA</cite>
        </label>
        <input type="checkbox" class="option-check" id='flag-option' value="A">
      </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'>
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
          <p class="calendar-option-push"></p>
          <cite>B</cite>
        </label>
        <input type="checkbox" class="option-check" id='nickel-option' value="B">
      </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'>
          <img...

CSS

.total-center {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
}

.option-check,
#pg-preview-wrap {
  display: none;
}

.product-wrap {
  width: 100%;
  position: relative;
  display: block;
}

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

.package-check-toggle {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

#calendar-select {
  width: 50%;
  margin: 0 auto 70px auto;
  background: #CCC;
  visibility: hidden;
  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 {
 ...

JavaScript

jQuery.fn.fadeBoolToggle = function(bool) {
  return bool ? this.fadeIn(400) : this.fadeOut(400);
}
var options = {
  dots: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 7000,
  speed: 800,
  slidesToShow: 1,
  adaptiveHeight: true
}
$('#slider-2yr').slick(options);
$('#cal-whiteboard').slick(options);

function showSlider2year() {
  $('#slider-2yr').show();
  $('#slider-2yr').slick(options);
}

function showSliderWhite() {
  $('#cal-whiteboard').show();
  $('#cal-whiteboard').slick(options);
}
function destroySlider(){
  $('#cal-whiteboard').slick('unslick');
  $('#slider-2yr').slick('unslick');
  $('#slider-2yr').hide();
  $('#cal-whiteboard').hide();
}
$('.calendar-check').on('change', function() {
  $('#pg-preview-wrap').fadeBoolToggle($('.calendar-check').is(':checked'));
  $('.calendar-check').not(this).prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false);
  this.checked = true;
  $('.option-check').prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false); // removing checkmark from pg option
  $(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);

  //Functions being called here:

  if ($('#cal-1').is(':checked')) {
    $('#prev-2year').fadeBoolToggle($('#cal-2year').is(':checked'));
    destroySlider()
    showSlider2year();
    console.log('2-year selected');
    $('.pg-selection-title').html('2-Year Calendar Color Themes');
  }

  if ($('#cal-2').is(':checked')) {
    $('#prev-whiteboard').fadeBoolToggle($('#cal-whiteboard').is(':checked'));
    destroySlider();
    showSliderWhite();
    console.log('Whiteboard selected');
    $('.pg-selection-title').html('Whiteboard Calendar Color Themes');
  }
});
$('body').on('change', '.option-check', function() {
  $('.option-check').not(this).prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false);
  this.checked = true;
 ...