JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<div class="slides" >
    
    <div class="slide">
        <div class="container">your content 1</div>
    </div>
    
    <div class="slide">
        <div class="container">your content 2</div>
    </div>
    <div class="slide">
        <div class="container">your content 3</div>
    </div>
    
</div>

CSS

body {
  		margin: 0;
  		padding: 0;
  	}
  	.slides{
  		position: absolute;
  		width: 100%;
  		height: 200px;
  		top: 0;
  		left: 0;
        margin: 0;
  		padding: 0;
  	}
    .container {
        width: 100%;
        background: green;
        margin: auto;
        height: 100%;
    }
  	/*.slick-initialized .slick-slide {
  	    position: relative;
        height: 300px;
        width: 100%;
  	    display: block;
  		background: #F90;
        margin: 0;
  		padding: 0;
  	}*/

JavaScript

$('.slides').slick({
    arrows: false,
    dots: true,
    infinite: true,
    speed: 400,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 5000
});