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">
	<img src="https://lucidar.me/fr/web-dev/files/img1.svg" id="carousel-image-1" class="carousel-image">
	<img src="https://lucidar.me/fr/web-dev/files/img2.svg" id="carousel-image-2" class="carousel-image">
	<img src="https://lucidar.me/fr/web-dev/files/img3.svg" id="carousel-image-3" class="carousel-image">
	<img src="https://lucidar.me/fr/web-dev/files/img4.svg" id="carousel-image-4" class="carousel-image">
	<img src="https://lucidar.me/fr/web-dev/files/img5.svg" id="carousel-image-5" class="carousel-image">
</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;
}