JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/css/style.css">
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<div class="your-class">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS

.slick-slide {
    background: #efefef;
    text-align: center;
    
}

.slick-prev, .slick-next {
    background: red;
}

.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
}

JavaScript

$('.your-class').slick({
  initialSlide: 1,
  arrows: false,
  infinite: false,
  slidesToScroll: 1,
  slidesToShow: 1,
  mobileFirst: true,
  variableWidth: true,
  focusOnSelect: false,
  swipe: true,
  accessibility: false,
  speed: 300,
  fade: false,
  dots: true
});