JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<div>
  <div class="single-item">
    <div class="box"><h1>1</h1></div>
    <div class="box"><h1>2</h1></div>
    <div class="box"><h1>3</h1></div>
    <div class="box"><h1>4</h1></div>
    <div class="box"><h1>5</h1></div>
  </div>
</div>

CSS

.box h1 {
    margin: 10px;
    background-color: blue;
    text-align: center;
    font-size: 22px;
    color: white;
    height: 200px;
    background-color:rgb(50,50,50);
}

.box {
    opacity: 0;
    transition: all 1s;

}
.single-item {
  width: 200px;
   
}
.box.slick-active,
.box.slick-center {
    opacity: 1;
    transition: all 1s;
}

JavaScript

$('.single-item').slick({
        centerMode: true,
        centerPadding: '0',
        infinite: true,
        slidesToShow: 1,
        arrows: true,
         fade: true,
});