JSFiddle - React, Tailwind, and code Playground

by eget teteete

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>
<div class="slick-wrapper">
  <div id="slick1">
		<div class="slide-item"><h3>1</h3></div>
		<div class="slide-item"><h3>2</h3></div>
		<div class="slide-item"><h3>3</h3></div>
		<div class="slide-item"><h3>4</h3></div>
		<div class="slide-item"><h3>5</h3></div>
		<div class="slide-item"><h3>6</h3></div>
		<div class="slide-item"><h3>7</h3></div>
		<div class="slide-item"><h3>8</h3></div>
		<div class="slide-item"><h3>9</h3></div>
		<div class="slide-item"><h3>10</h3></div>
		<div class="slide-item"><h3>11</h3></div>
		<div class="slide-item"><h3>12</h3></div>
		<div class="slide-item"><h3>13</h3></div>
		<div class="slide-item"><h3>14</h3></div>
		<div class="slide-item"><h3>15</h3></div>
		<div class="slide-item"><h3>16</h3></div>
		<div class="slide-item"><h3>17</h3></div>
		<div class="slide-item"><h3>18</h3></div>
		<div class="slide-item"><h3>19</h3></div>
		<div class="slide-item"><h3>20</h3></div>
		<div class="slide-item"><h3>21</h3></div>
		<div class="slide-item"><h3>22</h3></div>
		<div class="slide-item"><h3>23</h3></div>
		<div class="slide-item"><h3>24</h3></div>
		<div class="slide-item"><h3>25</h3></div>
		<div class="slide-item"><h3>26</h3></div>
		<div class="slide-item"><h3>27</h3></div>
		<div class="slide-item"><h3>28</h3></div>
	</div>
</div>

SCSS

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
	
body {
	display: flex;
	justify-content: center;
}
.slick-wrapper {
	width: 80%;
	background-color: aqua;
}
.slide-item {
	background-color: rebeccapurple;
	color: aqua;
	display: flex !important;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 200px;
	border: 1px solid white;
	h3 {
		font-family: Lato, sans-serif;
		font-size: 40px;	
	}
}

JavaScript

$('#slick1').slick({
		rows: 2,
		dots: false,
		arrows: true,
		infinite: true,
		speed: 300,
		slidesToShow: 3,
		slidesToScroll: 1
});