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 class="controls">
			<div class="controls-arrows"><div class="controls-dots"></div></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 class="controls">
			<div class="controls-arrows"><div class="controls-dots"></div></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 class="controls">
			<div class="controls-arrows"><div class="controls-dots"></div></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;
}

.controls-arrows,
.controls-dots {
	text-align: center;
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.controls-dots .slick-dots {
	position: relative;
	bottom: auto;
}
.controls-arrows .slick-prev, 
.controls-arrows .slick-next {
	position: relative;
	left: auto;
	right: auto;
	display: inline-block;
	top: auto;
	transform: none;
	vertical-align: middle;
}
.controls-arrows .slick-prev:before, 
.controls-arrows .slick-next:before {
	color: #919191
}
.slick-dotted.slick-slider {
	margin-bottom: 0px;
}

JavaScript

$('.slick').each(function(){
	var $this = $(this),
		$blockArrows = $('.controls-arrows', $this),
		$blockDots = $('.controls-dots', $this),
		$slick = $('.slider', $this);
	$slick.slick({
		dots: true,
		arrows: true,
		slidesToShow: 3,
		slidesToScroll: 1,
		appendArrows: $blockArrows,
		appendDots: $blockDots
	});
});