JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<section>
  <h2>Single Item</h2>
  <div class="js-slider-gift example">
    <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>
</section>

CSS

section {
    margin: auto;
    padding: 20px;
    width: 1000px;
    background: #3498db;
    font-family: Verdana, Arial, sans-serif;
    
}
.example h3 {
    background: #fff;
    color: #3498db;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}

JavaScript

var $slick = $('.js-slider-gift'),
    optionsDefault = {
        rows: 2,
        slidesToShow: 3,
        slidesToScroll: 3,
        arrows: true,
        infinite: false,
        dots: false,
        prevArrow: '<a href="javascript:void();" class="b-product-carousel-gift__arrow b-product-carousel-gift__arrow--prev carousel-control left"></a>',
        nextArrow: '<a href="javascript:void();" class="b-product-carousel-gift__arrow b-product-carousel-gift__arrow--next carousel-control right"></a>',
        responsive: [
            {
                breakpoint: 1300,
                settings: {
                    rows: 2,
                    slidesToShow: 2,
                    slidesToScroll: 2,
                }
            }
        ]
    },
    optionsMin = {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: false,
        mobileFirst: true,
        arrows: false,
        variableWidth: true,
        responsive: [
            {
                breakpoint: 599,
                settings: {
                    slidesToShow: 2
                }
            }
        ]
    };

$(document).ready(function() {
    $slick.slick();
    setOptionsSlider();
});
$(window).resize(function () {
    setOptionsSlider();
});

function setOptionsSlider() {
    var width = window.innerWidth || document.body.clientWidth,
        options;
    options = width < 960 ? optionsMin : optionsDefault;
    $slick.slick('slickSetOption', options);
}