JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://kenwheeler.github.io/slick/css/style.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<div class="blue">
	<div class="slick">
		<div class="slider">
			<div>
				<h3>1</h3>
			</div>
			<div>
				<h3>2</h3>
			</div>
			<div>
				<h3>3</h3>
			</div>
			<div>
				<h3>4</h3>
			</div>
			<div>
				<h3>5</h3>
			</div>
			<div>
				<h3>6</h3>
			</div>
		</div>
	</div>
	<div class="slick">
		<div class="slider">
			<div>
				<h3>1</h3>
			</div>
			<div>
				<h3>2</h3>
			</div>
			<div>
				<h3>3</h3>
			</div>
			<div>
				<h3>4</h3>
			</div>
			<div>
				<h3>5</h3>
			</div>
			<div>
				<h3>6</h3>
			</div>
		</div>
	</div>
	<div class="slick">
		<div class="slider">
			<div>
				<h3>1</h3>
			</div>
			<div>
				<h3>2</h3>
			</div>
			<div>
				<h3>3</h3>
			</div>
			<div>
				<h3>4</h3>
			</div>
			<div>
				<h3>5</h3>
			</div>
			<div>
				<h3>6</h3>
			</div>
		</div>
	</div>
</div>

CSS

.blue {
	padding-top: 1px;
	padding-bottom: 50px;
}
.slick {
	margin-left: 30px;
	margin-right: 30px;
	position: relative;
}
.slider {
	z-index: 5;
}
.controls {
	position: relative;
	z-index: 10;
	text-align: center;
	margin-top: -45px;
}

.slick-dotted.slick-slider {
	margin-bottom: 0px;
}
.slick-slide {
	transition: opacity .3s ease;
}
.slick-slide,
.slick-track .slick-active + .slick-active + .slick-active + .slick-active {
	opacity: 0.5;
}
.slick-track .slick-active + .slick-active,
.slick-track .slick-active + .slick-active + .slick-active {
	opacity: 1;
}

JavaScript

$('.slick').each(function(){
	var $this = $(this),
		$slick = $('.slider', $this);
	$slick.slick({
		dots: true,
		arrows: true,
		slidesToShow: 4,
		slidesToScroll: 1
	}).on('afterChange', function(a, b, c, d){
		console.log('afterChange', b, c, d);
	}).on('beforeChange', function(a, b, c, d){
		console.log('beforeChange', b, c, d);
	});
});