JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css"
/>
<style>
.f-carousel__slide {
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
text-align: center;
color: #ff3520;
background: #f3f3f3;
font-size: 1.25rem;
}
.f-carousel__slide.is-nav-selected {
color: #fff;
background: #ff3520;
}
#myCarousel {
--f-carousel-slide-width: 100%;
--f-carousel-spacing: 10px;
margin-bottom: 1rem;
}
#myNavigation {
--f-carousel-slide-width: 100px;
--f-carousel-spacing: 5px;
}
</style>
</head>
<body>
<main>
<div class="f-carousel" id="myCarousel">
<div class="f-carousel__slide">1</div>
<div class="f-carousel__slide">2</div>
<div class="f-carousel__slide">3</div>
<div class="f-carousel__slide">4</div>
<div class="f-carousel__slide">5</div>
<div class="f-carousel__slide">6</div>
<div class="f-carousel__slide">7</div>
<div class="f-carousel__slide">8</div>
<div class="f-carousel__slide">9</div>
<div class="f-carousel__slide">10</div>
</div>
<div class="f-carousel" id="myNavigation">
<div class="f-carousel__slide">1</div>
<div class="f-carousel__slide">2</div>
<div class="f-carousel__slide">3</div>
<div class="f-carousel__slide">4</div>
<div class="f-carousel__slide">5</div>
<div class="f-carousel__slide">6</div>
<div class="f-carousel__slide">7</div>
<div class="f-carousel__slide">8</div>
<div class="f-carousel__slide">9</div>
<div class="f-carousel__slide">10</div>
</div>
...