JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">

<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.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

<section class="regular slider">
  <div>
    <div class="image" style="background-image: url('http://placehold.it/150x300?text=1')"></div>
    <p>text</p>
  </div>
  <div>
    <div class="image" style="background-image: url('http://placehold.it/550x300?text=2')"></div>
    <p>text</p>
  </div>
  <div>
    <div class="image" style="background-image: url('http://placehold.it/350x300?text=3')"></div>
    <p>text</p>
  </div>
  <div>
    <div class="image" style="background-image: url('http://placehold.it/350x300?text=4')"></div>
    <p>text</p>
  </div>
  <div>
    <div class="image" style="background-image: url('http://placehold.it/350x300?text=5')"></div>
  </div>
  <div>
  <div class="image" style="background-image: url('http://placehold.it/350x300?text=6')"></div>
  </div>
  <div>
    <div class="image" style="background-image: url('http://placehold.it/350x300?text=7')"></div>
  </div>
  <div>
    <div class="image" style="background-image: url('http://placehold.it/350x300?text=8')"></div>
  </div>
  <div>
    <div class="image" style="background-image: url('http://placehold.it/350x300?text=9')"></div>
  </div>
  <div>
    <div class="image" style="background-image: url('http://placehold.it/350x300?text=10')"></div>
  </div>
  <div>
    <div class="image" style="background-image: url('http://placehold.it/350x300?text=11')"></div>
  </div>
  <div>
    <div class="image" style="background-image: url('http://placehold.it/350x300?text=12')"></div>
  </div>
</section>

CSS

html,
   body {
     margin: 0;
     padding: 0;
   }
   
   * {
     box-sizing: border-box;
   }
   
   .slider {
     margin: 50px;
   }
      
   .slick-track .slick-slide {
     margin: 0px 10px;
   }
   
   .slick-slide .image {
     
     height: 200px;
     width: 100%;
     margin: 0 auto;
     
     background-repeat: no-repeat;
     background-position: center; 
     background-size: contain;
   }
   
   .slick-slide .image:last-child {
     margin-bottom: 50px;
   }
   
   .slick-prev:before,
   .slick-next:before {
     color: blue;
   }
   
   @media screen and (max-width: 768px) {
     .slick-dots {
       position: initial !important;
     }
   }

JavaScript

$(".regular").slick({
  dots: true,
  infinite: false,
  slidesToShow: 7,
  slidesToScroll: 6,
  responsive: [{
    breakpoint: 1200,
    settings: {
      slidesToShow: 5,
      slidesToScroll: 4
    }
  }, {
    breakpoint: 992,
    settings: {
      arrows: false,
      slidesToShow: 3,
      slidesToScroll: 2
    }
  }, {
    breakpoint: 768,
    settings: {
      arrows: false,
      slidesToShow: 1,
      slidesToScroll: 1
    }
  }]
});