JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">

<div class="slick-carousel">
  <div><div class="slide-content">1</div></div>
  <div><div class="slide-content">2</div></div>
  <div><div class="slide-content">3</div></div>
  <div><div class="slide-content">4</div></div>
  <div><div class="slide-content">5</div></div>
  <div><div class="slide-content">6</div></div>
</div>
<div class="nav">
  <div>lorem</div>
  <div>ipsum</div>
  <div>dolor</div>
  <div>sit</div>
  <div>amet</div>
  <div>consectetur</div>
</div>

SCSS

$gutters: 10%;

body {
  background: #333;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  
  .slick-slide {
    .slide-content{
      margin: 0 $gutters;
      padding: 50px 100px;
      background: #fff;
    }
  }
  
  .slick-list {
     margin: 20px 0px;
  }
}

.nav div {
  background: white;
  margin: 5px 20%;
  padding: 5px;
  text-align: center;
}

.active {
  color: red;
  font-weight: bold;
}

JavaScript

const $buttons = $('.nav > div').click(function() {
  $slick.slick('slickGoTo', $buttons.index(this));
});

const $slick = $('.slick-carousel')
  .on('init beforeChange', function(e, slick, currSlide, nextSlide) {
    $buttons
      .removeClass('active')
      .eq(e.type === 'init' ? slick.currentSlide : nextSlide)
      .addClass('active');
  })
  .slick({
    infinite: false,
    arrows: false,
    slidesToShow: 1,
  });