JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet" href="//kenwheeler.github.io/slick/slick/slick-theme.css">
<div class="slider responsive">
    <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>

JavaScript

$('.responsive').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [{
        breakpoint: 1024,
        settings: "unslick"
    }, {
        breakpoint: 600,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 2
        }
    }, {
        breakpoint: 480,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1
        }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
    ]
});