JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pct-bar"></div>
<div class="carousel-wrapper">
  <div class="carousel-card"
    style="--image: url('https://images.unsplash.com/photo-1717603545758-88cc454db69b?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
    <div class="carousel-card__content">
      <div class="carousel-card__overlay"></div>
      <div class="carousel-card__info">
        <div class="carousel-card__title">Matcha latte</div>
        <div class="carousel-card__subtitle">
          <span>A taste of green tea</span>
        </div>
      </div>
      <div class="carousel-card__bg"></div>
    </div>
  </div>
  <div class="carousel-card"
    style="--image: url('https://images.unsplash.com/photo-1717603545758-88cc454db69b?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
    <div class="carousel-card__content">
      <div class="carousel-card__overlay"></div>
      <div class="carousel-card__info">
        <div class="carousel-card__title">Cappuccino</div>
        <div class="carousel-card__subtitle">
          <span>A taste of creamy foam</span>
        </div>
      </div>
      <div class="carousel-card__bg"></div>
    </div>
  </div>
  <div class="carousel-card"
    style="--image: url('https://images.unsplash.com/photo-1717603545758-88cc454db69b?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
    <div class="carousel-card__content">
      <div class="carousel-card__overlay"></div>
      <div class="carousel-card__info">
        <div class="carousel-card__title">Chai latte</div>
        <div class="carousel-card__subtitle">
          <span>A taste of spiced warmth</span>
        </div>
      </div>
      <div class="carousel-card__bg"></div>
    </div>
  </div>
  <div class="carousel-card"
    style="--image:...

SCSS

:root {
  --animation-ease: linear;
  --snap: x mandatory;
  --image: url('./assets/matcha.jpeg');
}

@property --scroll-pct {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}


* {
  box-sizing: border-box;
}

html {
  margin: 0;
  width: 100%;;
  height: 100%;

  -moz-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility !important;
}

body {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  background-color: #f5f5f5;
  height: 100%;
  overflow: hidden;
  width: 100%;
  timeline-scope: --carouselScroll;
}


.carousel-wrapper {
  height: 100%;
  width: 100%;
  padding: 0 calc(50% - 140px);
  display: flex;
  gap: 20px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: var(--snap);
  position: relative;
  scroll-behavior: smooth;
  scroll-timeline: --carouselScroll inline;

  scrollbar-width: none;
  -ms-overflow-style: none;

}

body:not(.debug) .carousel-wrapper::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  scroll-snap-align: center;
  flex-shrink: 0;
  width: 280px;
  height: 450px;
  position: relative;


  &:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    width: 120vw;
    height: 120vh;
    left: calc(50% - 60vw);
    right: 0;
    margin: 0 auto;
    background-image: var(--image);
    filter: blur(10px);
    opacity: 0.2;
    background-size: cover;
    background-position: center center;
  }

  &__content {
    overflow: clip;
    width: 100%;
    height: 100%;
    padding: 40px 30px;
    background-color: #fff;
    border-radius: 30px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-end;


    &:before {
      content: '';
      opacity: .5;
      position: absolute;
      top: 0;
      left: 0;
...