JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide">
      <div class="card">Slide 1</div>
    </div>
    <div class="swiper-slide slide">
      <div class="card">Slide 2</div>
    </div>
    <div class="swiper-slide slide">
      <div class="card">Slide 3</div>
    </div>
    <div class="swiper-slide slide">
      <div class="card">Slide 4</div>
    </div>
    <div class="swiper-slide slide">
      <div class="card">Slide 5</div>
    </div>
    <div class="swiper-slide slide">
      <div class="card">Slide 6</div>
    </div>
  </div>
</div>

CSS

.swiper {
  width: 600px;
  height: 300px;
}

.card {
  height: 125px;
  background: royalblue;
  color: white;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  transition: all 300ms;
}

.slide {
  width: 300px;
  height: 200px;
}

/* 
.swiper-slide .card {
  opacity: 0;
  transform: translate3d(0, 200%, 0);
}

.swiper-slide-prev .card,
.swiper-slide-next .card {
  opacity: 0.5;
  transform: translate3d(0, 20px, 0);
}

.swiper-slide-active .card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
} */

JavaScript

const swiper = new Swiper(".swiper", {
  loop: true,
  centeredSlides: true,
  slidesPerView: 3,
  spaceBetween: 8,
  effect: "creative",
  creativeEffect: {
    perspective: true,
    limitProgress: 3,
    prev: {
      translate: ['-90%', '20%', -100],
      rotate: [0, 0, -20],
      opacity: 0.5,
      origin: "bottom"
    },
    next: {
      translate: ['90%', '20%', -100],
      rotate: [0, 0, 20],
      opacity: 0.5,
      origin: "bottom"
    },
  },
});