JSFiddle - React, Tailwind, and code Playground

HTML

<div class="your-class">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

SCSS

.your-class {
  width: 350px;
  background: #ccc;
  margin: 0 auto;
  div {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    &:nth-child(1) {
      background: gray;
    }
    &:nth-child(2) {
      background: pink;
    }
    &:nth-child(3) {
      background: orange;
    }
    &:nth-child(4) {
      background: blue;
    }
  }
}

JavaScript

$(document).ready(function(){

/* $(window).on('resize',function(){
var widthResize = $( window ).width();
if(widthResize <= 480){
  $('.your-class').slick({
    responsive: [
      {
        breakpoint: 480,
        settings: {
          loop: true,
          slidesToShow: 1,
          prevArrow: '<div class="prev"><</div>',
          nextArrow: '<div class="next">></div>'
        }
      }
    ]
  });
}
else if(widthResize >= 481){
    $('.slider-application').slick({
      settings: "unslick"
    });
}

}); */
  $('.your-class').slick({
  	loop: true,
    slidesToShow: 3,
    prevArrow: '<div class="prev"><</div>',
    nextArrow: '<div class="next">></div>'
  });

});