JSFiddle - React, Tailwind, and code Playground

by stic_k

HTML

<div class="your-class">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

SCSS

.your-class {
  width: 350px;
  background: #ccc;
  margin: 0 auto;
  div {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    &:nth-child(1) {
      background: gray;
    }
    &:nth-child(2) {
      background: pink;
    }
    &:nth-child(3) {
      background: orange;
    }
    &:nth-child(4) {
      background: blue;
    }
  }
}

JavaScript

$(document).ready(function() {
  $('.your-class').slick({
     slidesToShow: 4
  });
});