JSFiddle - React, Tailwind, and code Playground

by Alexey Zuev

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
  <div class="your-class">
    <div>your content1</div>
    <div>your content2</div>
    <div>your content3</div>
    <script> 
      var param = 2;
    </script>
  </div>
<div class="carousel">
    <div class="carousel-item">Item 1</div>
    <div class="carousel-item">Item 2</div>
    <div class="carousel-item">Item 3</div>
    <script> 
      var param = 2;
    </script>
  </div>

CSS

.your-class div {
    min-height: 100px;
    line-height: 100px;
    text-align: center;
}

.carousel {
    margin-top: 10px;
}
.carousel-item {
    background: #369;
    line-height: 100px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}
.carousel-item:nth-child(2) {
    background: #8BC34A;
}
.carousel-item:nth-child(3) {
    background: #F44336;
}

JavaScript

$(function(){
    $('.your-class').slick({
        slide: 'div'
    });
    $('.carousel').slick({
        slide: '.carousel-item'
    });
});