JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.js"></script>
<div class="container">
  <p>Cols</p>
  <div class="row">
    <div class="col-sm-4">
      <div class="drop-shadow">
        <div class="content">
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="drop-shadow">
        <div class="content">
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="drop-shadow">
        <div class="content">
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
  </div>
  <p>Slider</p>
  <div class="slider-wrapper">
    <div class="slider row">
      <div class="col-sm-4">
        <div class="drop-shadow">
          <div class="content">
            <p>Lorem ipsum dolor sit amet</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="drop-shadow">
          <div class="content">
            <p>Lorem ipsum dolor sit amet</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="drop-shadow">
          <div class="content">
            <p>Lorem ipsum dolor sit amet</p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="drop-shadow">
          <div class="content">
            <p>Lorem ipsum dolor sit amet</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.row {
  margin: 20px 0;
}

.drop-shadow {
  box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.35);
}

.slick-slide .drop-shadow {
  box-shadow: none;
  transition: box-shadow 0.1s ease-in-out;
}

.slick-slide.slick-active .drop-shadow {
  box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.35);
}

.content {
  margin: 10px;
}

.slider-wrapper {
  width: calc(100% + 30px);
  padding: 0 15px;
  margin-left: -15px;
  overflow: hidden;
}

.slick-list {
  overflow: visible;
}

JavaScript

$('.slider').slick({
  autoplay: false,
  dots: false,
  arrows: false,
  infinite: false,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 1,
  swipeToSlide: true,
  responsive: [{
    breakpoint: 992,
    settings: {
      slidesToShow: 2
    }
  }, {
    breakpoint: 768,
    settings: {
      slidesToShow: 1
    }
  }]
});