JSFiddle - React, Tailwind, and code Playground

by Alexandre Froger

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="container">
<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>
					<h3>7</h3>
				</div>
				<div>
					<h3>8</h3>
				</div>
			</div>
      </div>

CSS

body{
  background: #3498db;
}
.container{
  width: 800px;
  margin: 0 auto;
  display: block;
}
.slick-slide{
  background: white;
  margin: 10px;
  text-align:center;
}

JavaScript

$(document).ready(function(){
  $('.slider').slick({
  dots: false,
  infinite: false,
  speed: 400,
  slidesToShow: 5,
  slidesToScroll: 5
});
});