JSFiddle - React, Tailwind, and code Playground

by wouterhendriks

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 row">
    <div class="col-sm-4">
      <div class="content">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="content">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="content">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="content">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
</div>

CSS

.drop-shadow {
}

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

.slick-list {
  box-sizing: initial;
  padding: 25px 0px;
}

.content p {
  margin: 10px 0;
}

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
    }
  }]
});