JSFiddle - React, Tailwind, and code Playground

by l2banners

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<svg class="svg-about">
		<g id="favorites">
		   <path d="M285.257,35.528c58.743,0.286,106.294,47.836,106.58,106.58c0,107.624-195.918,214.204-195.918,214.204S0,248.165,0,142.108c0-58.862,47.717-106.58,106.58-106.58l0,0c36.032-0.281,69.718,17.842,89.339,48.065C215.674,53.517,249.273,35.441,285.257,35.528z" />
		</g>
		<g id="btn--col">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M1 16C0.447715 16 0 15.5523 0 15V1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1V15C16 15.5523 15.5523 16 15 16H1ZM1.5 1.5V7.5H7.25V1.5H1.5ZM8.75 1.5V7.5H14.5V1.5H8.75ZM7.25 9H1.5V14.5H7.25V9ZM8.75 14.5V9H14.5V14.5H8.75Z"/>
		</g>
		<g id="btn--row">
			<mask id="path-1-inside-1" fill="white">
			<rect width="16" height="16" rx="1"/>
			</mask>
			<rect width="16" height="16" rx="1" stroke-width="3" mask="url(#path-1-inside-1)"/>
		</g>
	</svg>


	<section class="shop">
		<div class="container">
			<div class="shop__holder">
				<div class="shop__box shop__box--content">
					<div class="shop__inner">
						<p class="shop__elem">Показано <span>9</span> з <span>35</span> результатів</p>
					
					    <div class="shop__control">
					    	<button class="shop__view shop__view--row">
					    		<svg viewBox="0 0 16 16" class="shop__rebuild">
									<use xlink:href="#btn--row"></use>
								</svg>
					    	</button>
					    	<button class="shop__view shop__view--col shop__view--active">
					    		<svg viewBox="0 0 16 16" class="shop__rebuild">
									<use xlink:href="#btn--col"></use>
								</svg>
					    	</button>
					    </div>
					</div>
					<div class="shop__wrap">
						<div class="shop__item">
							<div class="shop__row">
								<div class="shop__slider">
									<div class="shop__pic">
										<img...

CSS

.shop {
	background-color: #fff;
	padding-top: 80px;
	padding-bottom: 34px;
}

.shop__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.shop__elem {
	font-size: 12px;
	line-height: 1.2;
	color: #6B6C70;
	margin-bottom: 32px;
}

.shop .select__wrap {
	max-width: 290px;
	margin-bottom: 32px;
}

.shop .select__placeholder {
	border: 1px solid #ECEDF3;
	border-radius: 4px;
}

.shop .select__list {
	margin-top: 10px;
	border: 1px solid #ECEDF3;
	border-radius: 4px;
}

.shop__wrap {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -20px;
}

.shop__slider {
	position: relative;
}

.shop__item {
	position: relative;
	width: calc(100% / 3 - 40px);
	margin: 0 20px;
	margin-bottom: 32px;
}

.shop__item:hover .shop__size,
.shop__item:hover .shop__btn {
	opacity: 1;
	visibility: visible;
}

.shop__item .slick-track {
	display: flex;
	align-items: center;
	justify-content: center;
}

.shop__pic {
	display: block;
}

.shop__pic img {
	display: block;
	margin: 0 auto;
}

.shop__holder {
	display: flex;
}

.shop__box--aside {
	width: 290px;
	padding-top: 2px;
}

.shop__box--content {
	width: calc(100% - 290px);
	padding-right: 40px;
}

.shop__subtitle {
	font-size: 14px;
	line-height: 1.2;
	color: #3D3F42;
	text-transform: uppercase;
	padding-bottom: 24px;
	font-weight: 600;
}

.shop__list {
	display: flex;
	flex-direction: column;
	padding-bottom: 48px;
}

.shop__list--size .shop__col {
	text-transform: uppercase;
}

.shop__col {
	cursor: pointer;
	display: inline-block;
	width: max-content;
	font-size: 14px;
	line-height: 1.2;
	color: #9F9F9F;
	margin-bottom: 16px;
}

.shop__row {
	position: relative;
	margin-bottom: 16px;
	outline: 2px solid red;
}

.shop__add {
	cursor: pointer;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 18px;
	height: 18px;
	border: none;
	outline: none;
	padding: 0px;
	background-color: transparent;
}

.shop__add--active .shop__icon {
	fill: #3D3F42;
}

.shop__icon {
	width: 100%;
	height: 100%;
	display:...

JavaScript

$(document).ready(function() {

function changeFormat(btn, btn_active, btn_check, row, wrap, inner) {
  $(btn).on('click', function () {
    let elems = $(btn);
   elems.each(function(index, item) {
    $(item).removeClass(btn_active); 
    });
   $(this).addClass(btn_active);
      if($(row).hasClass(btn_check) ) {
        $(wrap).addClass(inner);
      } else {
       $(wrap).removeClass(inner);
      }
     for (i = 0; i < sliders.length; i++) {
     	sliders[i].slick('setPosition');
     }
  })
  }

changeFormat('.shop__view', 'shop__view--active', 'shop__view--active', '.shop__view--row', '.shop', 'shop--inner');

var sliders = [];

 var wpapper = $('.shop__item');
  wpapper.each(function(index, element) {
    let __this = $(this);
    let gallery = __this.find('.shop__slider');
    let arrowsShop = __this.find('.shop__wrap-btn');
    let dots = __this.find('.shop__dots');
    sliders.push(gallery);
    gallery.slick({
      infinite: true,
      // speed: 600,
      slidesToShow: 1,
      // autoplay: true,
      //autoplaySpeed:5000,
      draggable: false,
      fade: false,
      arrows: true,
      appendArrows: arrowsShop,
      prevArrow: '<button class="shop__btn shop__btn--dir_left"></div>',
      nextArrow: '<button class="shop__btn shop__btn--dir_right"></button>',
      dots: true,
      appendDots: dots,
      customPaging: function(slider, i) {
        return '0' + (i + 1);
      },
      dotsClass: 'shop__dots-list',
    });
  });
  });