JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<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="contact-info/" method="post">

    <select id="product_type">
      <option value="" hidden selected>Produktkategorie auswählen</option>
			 <option value="">Kaffeebereiter</option>
      <option value="18">Trinkbehälter – Vitalitea</option>
      <option value="11">Sonstiges</option>
    </select>
		
		

		
    <select id="intenca" class="product-size" data-product-cat="1" hidden>
      <option value="" hidden selected>Kissenkategorie auswählen</option>
      <option value="68">2 Tassen</option>
      <option value="70">4 Tassen</option>
      <option value="55">6 Tassen</option>
    </select>

    <select id="gazetaro_i" class="product-size" data-product-cat="2" hidden>
      <option value="" hidden selected>Kissenkategorie auswählen</option>
      <option value="16">3 Tassen</option>
      <option value="42">8 Tassen</option>
    </select>

    <input type="text" id="product_id" name="Product-ID" hidden>
    <input type="text" value="" id="marketplace" name="Marketplace" style="display:none;">
    <input id="submit_btn" type="submit" value="Weiter" hidden>
  </form>
	
	
	    <div class="slick-slider">
   ...

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

.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;
}

JavaScript

(function($) {
		
  })(jQuery);