JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/fonts/slick.woff"></script>
<div id='slick-slider' class='slider'>
  <div>
    <div class="slider-item">1</div>
  </div>
  <div>
    <div class="slider-item">2</div>
  </div>
  <div>
    <div class="slider-item">3</div>
  </div>
  <div>
    <div class="slider-item">4</div>
  </div>
  <div>
    <div class="slider-item">5</div>
  </div>
  <div>
    <div class="slider-item">6</div>
  </div>
  <div>
    <div class="slider-item">7</div>
  </div>
  <div>
    <div class="slider-item">8</div>
  </div>

  <div>
    <div class="slider-item">9</div>
  </div>
  <div>
    <div class="slider-item">10</div>
  </div>
  <div>
    <div class="slider-item">11</div>
  </div>
  <div>
    <div class="slider-item">12</div>
  </div>
  <div>
    <div class="slider-item">13</div>
  </div>
  <div>
    <div class="slider-item">14</div>
  </div>
  <div>
    <div class="slider-item">15</div>
  </div>
  <div>
    <div class="slider-item">16</div>
  </div>
</div>

CSS

.slider-item {
  background-color: #fff;
  text-align: center;
  height: 100px;
  line-height: 100px;
  margin: 10px;
}

JavaScript

$('#slick-slider').slick({
    rows: 2,
    slidesPerRow: 4,
    responsive: [{
    	breakpoint: 1024, settings: {
      	rows: 1,
        slidesPerRow: 2,
        centerMode: true
      }
    }]
});