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/jquery/3.1.1/jquery.min.js"></script>
<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.css">
<div class="slider-box">
  <div id="slider" class="slider">
  <div class="slide slide_orange">1</div>
  <div class="slide slide_blue">2</div>
  <div class="slide slide_purple">3</div>
</div>
</div>

CSS

html {font-size: 100%;background-color: #ccc;}
.slider-box{max-width: 1200px;padding-left: 15px;padding-right: 15px;-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;margin-left: auto;margin-right: auto;}
.slide {width: 250px;height: 250px;color: #fff; font-size: 3rem; font-weight: bold;}
.slide_orange{background-color: orange;}
.slide_blue{background-color: #08f;}
.slide_purple{background-color: purple;}

@media (min-width: 768px) {
  .slider {
    display: flex;
  }
}

JavaScript

$slick_slider = $('#slider');

$(window).on('resize', function() {
    if ($(window).width() >= 768) {
      if ($slick_slider.hasClass('slick-initialized')) {
        $slick_slider.slick('unslick');
      }
      return
    }

    if (!$slick_slider.hasClass('slick-initialized')) {
      return $slick_slider.slick({slidesToShow: 1,
  slidesToScroll: 1});
    }
  });