JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<div class="wrapper">
  <div class="content">
  <div class="slider">
    <div class="slider__item">
      <img src="https://pp.userapi.com/c834100/v834100491/58296/G8F9vgI_pr4.jpg" />
    </div>
    <div class="slider__item">
      <img src="https://pp.userapi.com/c834100/v834100491/58296/G8F9vgI_pr4.jpg" /> 
    </div>
    <div class="slider__item">
      <img src="https://pp.userapi.com/c834100/v834100491/58296/G8F9vgI_pr4.jpg" />
    </div>
  </div>
</div>
</div>

CSS

.wrapper {
  width: 1170px;
  background: pink;
}
.content {
  width: 975px;
  margin: auto;
}
.slick-slide:not(.slick-center) {
  z-index: 0;
  transform: scale(0.7);
}
.slick-active.slick-center+.slick-slide+.slick-slide {
  z-index: 1;
}
.slick-active.slick-center+.slick-slide,
.slick-center+.slick-cloned {
  z-index: 2;
}
.slick-center {
  z-index: 3;
}
.slick-slide {
  position: relative;
  transition: transform 80ms;
}
.slider__item img {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}
.slick-prev {
  left: 10% !important;
}
.slick-next {
  right: 10% !important;
}

JavaScript

$('.slider').slick({
  arrows: true,
  centerMode: true,
  infinite: true,
  centerPadding: '250px',
  slidesToShow: 1,
  speed: 500,
  dots: false,
});