JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />

<div id="product_select_wrap">
  <form name="product_select" id="product_select_form" action="/present-contact-info/" method="GET">
    <select id="product_type">
      <option value="" hidden selected>Produktkategorie auswählen</option>
      <option value="1">Bandagen</option>
      <option value="2">Kissen</option>
      <option value="3">Ergonomische Produkte</option>
      <option value="4">Spuckschutzwand</option>
    </select>

    <!-- Kissen Categories -->
    <select id="cushion_type" hidden>
      <option value="" hidden selected>Kissenkategorie auswählen</option>
      <option value="sitzkissen">Sitzkissen</option>
      <option value="rückenkissen">Rückenkissen</option>
      <option value="kopfkissen">Kopfkissen</option>
      <option value="keilkissen">Keilkissen</option>
      <option value="kniekissen">kniekissen</option>
      <option value="comfort-set">Comfort Set</option>
    </select>


    <input type="text" name="marketplace" id="marketplace">
    <input type="text" name="landing-page" value="present">
    <input type="text" id="product_id" name="product-id">
    <input type="text" id="webshop_product_id" name="webshop-product-id">
    <input id="submit_btn" type="submit" value="Weiter">
  </form>




  <div class="slick-slider">
    <!-- Bandagen -->
    <div class="slick-slide" data-product-id="4525685997621" data-product-cat="1"><img src="https://via.placeholder.com/300x220.png">Kusano Ellenbogenbandage</div>
    <div class="slick-slide" data-product-id="4527383707701" data-product-cat="1"><img src="https://via.placeholder.com/300x220.png">Tasano Fußgelenkbandage</div>
    <div class="slick-slide"...

CSS

#product_select_wrap select, #product_select_wrap input {
    width: 100%;
}

#product_select_wrap {
    width: 40%;
    margin: auto;
}

@media only screen and (max-width: 767px) {
    #product_select_wrap {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #product_select_wrap {
        width: 60%;
    }
}


/* Slick Styling */
.slick-slide {
    text-align: center;
    background: #eee;
    font-size: 16px;
    color: #6BAAD9;
    font-weight: 600;
    padding: 10px;
    margin: 0 10px;
    border-radius: 5px;
}

.slick-slide {

}

.slick-prev {
	left: 5px;
	z-index: 1000;
}

.slick-next {
	right: 5px;
	z-index: 1000;
}

.slick-slide img {
	margin: auto;
	cursor: pointer;
	margin-bottom: 5px;
    border-radius: 5px;
		width: 100%;
}

.slick-slide:hover {
	-moz-box-shadow: inset 0px 0px 0px 3px #F92C55;
	box-shadow: inset 0px 0px 0px 3px #F92C55;
}

.slick-list {
	outline: none !important;
}

.slick-slide:focus {
	outline: none;
}

.slick-next:before,
.slick-prev:before {
	color: #ccc !important;
}

#product_select_wrap {
    width: 40%;
    margin: auto;
}

form {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#product_select_wrap select, #product_select_wrap input {
    width: 100%;
}

#purchase_channel_wrap select, #product_select_wrap select, #gift-form-wrap select {
    font-size: 20px;
    padding: 5px 10px 5px 10px;
    margin: 5px 0;
    background-color: #F4F4F4 !important;
    border-radius: 5px;
    color: #777;
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background:...

JavaScript

$('#marketplace').val('amazon.de');
    var $product_type = $('#product_type'),
      $cushion_type = $('#cushion_type'),
      $submit_btn = $('#submit_btn'),
      $slick_slider = $('.slick-slider'),
      $slick_slide = $('.slick-slide'),
      slick_filtered = false;

    $product_type.on('change', function() {
      $slick_slider.slideUp();
      $cushion_type.fadeOut();
      $cushion_type.prop('selectedIndex', 0);
			
      let product_type = $product_type.val();
			
      if (product_type != 2) {
        console.log('this is bandage');

        $slick_slider.fadeIn();
        $submit_btn.fadeOut();

        if (slick_filtered === false) {
          $('.slick-slider').slick('slickFilter', '[data-product-cat="' + product_type + '"]');
          slick_filtered = true;
        } else {
          $slick_slider.slick('slickUnfilter');
          $slick_slider.slick('slickFilter', '[data-product-cat="' + product_type + '"]');
        }
      }

      if ($product_type.val() == 2) {
        $cushion_type.fadeIn();
        $submit_btn.fadeOut();
      }

    });

    $cushion_type.on('change', function() {
      console.log('11');
      $slick_slider.fadeIn();
      $submit_btn.fadeOut();

      cushion_type_id = $cushion_type.find(':selected').val();

      if (slick_filtered === false) {
        $('.slick-slider').slick('slickFilter', '[data-product-cat="' + cushion_type_id + '"]');
        slick_filtered = true;

      } else {
        $slick_slider.slick('slickUnfilter');
        $slick_slider.slick('slickFilter', '[data-product-cat="' + cushion_type_id + '"]');
      }
    });

    $(document).ready(function() {
      $submit_btn.hide();
      $slick_slider.hide();
      $slick_slider.slick({
        dots: true,
        infinite: false,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [{
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 3
            }
 ...