JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide transition-all duration-500 ease-in-out"></li>
      <li class="splide__slide transition-all duration-500 ease-in-out"></li>
      <li class="splide__slide transition-all duration-500 ease-in-out"></li>
    </ul>
  </div>
</div>

SCSS

.splide__list {
	display: flex;
	flex-direction: row;
}

.splide__slide {
	width: 200px;
	height: 200px;
	background: rebeccapurple;
	margin-bottom: 2rem;
	opacity: 70%;
	
	&.is-active {
		transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
		transform: translateX(300px);
		opacity: 100%;
	}
}

JavaScript

var splide = new Splide( '.splide', {
  type: 'loop',
  perPage: 3,
  perMove: 1,
  focus: 'center',
  direction: 'ttb',
  height: '600px',
} );

splide.mount();