JSFiddle - React, Tailwind, and code Playground

by Imabot

HTML

<div id="carousel">
	<img src="https://lucidar.me/fr/web-dev/files/img0.svg" id="carousel-image-0" class="carousel-image mv0to5">
	<img src="https://lucidar.me/fr/web-dev/files/img1.svg" id="carousel-image-1" class="carousel-image mv1to0">
	<img src="https://lucidar.me/fr/web-dev/files/img2.svg" id="carousel-image-2" class="carousel-image mv2to1">
	<img src="https://lucidar.me/fr/web-dev/files/img3.svg" id="carousel-image-3" class="carousel-image mv3to2">
	<img src="https://lucidar.me/fr/web-dev/files/img4.svg" id="carousel-image-4" class="carousel-image mv4to3">
	<img src="https://lucidar.me/fr/web-dev/files/img5.svg" id="carousel-image-5" class="carousel-image mv5to4">
</div>

CSS

body {
	background-color: #323232;
	caret-color: transparent;
	margin: 0;
}
#carousel {
    width: 100%;
    max-width: 100vw;
    height: 21vh;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

.carousel-image {
    height: 20vh;
    max-height: 200px;
    position: absolute;
    left: 50%;
    border-radius: 7%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}

#carousel-image-0 {
    transform: translateX(-50%) translateX(-120%) scale(0.6);
    filter: brightness(40%);
    z-index: 1;
}

#carousel-image-1 {
    transform: translateX(-50%) translateX(-80%) scale(0.8);
    filter: brightness(65%);
    opacity: 1;
    z-index: 2;
}

#carousel-image-2 {
    transform: translateX(-50%) scale(1);
    filter: brightness(100%);
    opacity: 1;
    z-index: 3;
}

#carousel-image-3 {
    transform: translateX(-50%) translateX(80%) scale(0.8);
    filter: brightness(65%);
    opacity: 1;
    z-index: 2;
}

#carousel-image-4 {
    transform: translateX(-50%) translateX(120%) scale(0.6);
    filter: brightness(40%);
    opacity: 1;
    z-index: 1;
}

#carousel-image-5 {
    transform: translateX(-50%) scale(1.5);
    filter: brightness(40%);
    opacity: 0;
    z-index: 1;
}

/* Forward */
.mv0to5 {
    animation: 2s ease-out mv0to5;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;	
}

.mv5to4 {
    animation: 2s ease-out mv5to4;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;	
}

.mv4to3 {
    animation: 2s ease-out mv4to3;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;	
}

.mv3to2 {
    animation: 2s ease-out mv3to2;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;	
}

.mv2to1 {
    animation: 2s ease-out mv2to1;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;	
}

.mv1to0 {
    animation: 3s ease-out mv1to0;
    animation-iteration-count: infinite;
    animation-fill-mode:...