JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css?ver=4.9.9">
<div
  class="slick-carousel"
  data-slick='{
    "dots": true,
    "slidesToShow": 3,
    "infinite": true,
    "prevArrow": "<a href=\"#\" class=\"slick-prev\">PREV</a>",
    "nextArrow": "<a href=\"#\" class=\"slick-next\">NEXT</a>"
  }'
></div>

CSS

.slide {
  height: 200px;
}

.slick-prev {
  color: red;
  font-weight: bold;
}

.slick-next {
  color: blue;
  font-weight: bold;
}

.slick-dots {
  text-align: center;
}

.slick-dots li {
  display: inline-block;
}

JavaScript

$('.slick-carousel')
  .html(
    [ 'red', 'blue', 'green', 'yellow', 'aqua', 'magenta', 'lime', 'brown' ]
      .map((n, i) => `<div class="slide" style="background-color: ${n}">${i}</div>`)
      .join('')
  )
  .slick();