JSFiddle - React, Tailwind, and code Playground

HTML

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


<div id="card">

  <div class="carousell" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
    <div class="" style="slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
    <div class="carousell_slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
    <div class="carousell_slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
    <div class="carousell_slide">
      <img style="margin: auto; top: 0; bottom: 0; width: 100%" src="http://www.stickpng.com/assets/images/580b585b2edbce24c47b290b.png">
    </div>
  </div>

CSS

.slick-list {
    margin-left: -2%;
  }

.carousell {
  overflow: hidden;
}

.carousell_slide {
  position: relative;
  /*padding-left: 2%;*/
}

.slick-slide {
  float: left;
  margin-left: 2%;
}

.slick-initialized .slick-slide {
  display: block;
}

#card {
  position: absolute;
  margin-top: 10%;
  background-color: darkgray;
  border-radius: 16px;
  width: 90%;
  height: 30%;
}

JavaScript

$(document)
  .ready(function() {
    $('.carousell')
      .slick({
        centerMode: true,
        centerPadding: '60px',
        slidesToShow: 4,
        dots: false,
        prevArrow: false,
        nextArrow: false,
        responsive: [{
          breakpoint: 768,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 4
          }
        }]
      });
  });