JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carousel">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.carousel {
  scroll-snap-type: x mandatory;
  scroll-padding: 16px;
  
  display: flex;
  gap: 8px;
  border: 1px solid blue;
  overflow-x: auto;
}

.item {
  scroll-snap-align: start;
  
  /* content placeholder */
  flex-shrink: 0;
  width: 180px;
  height: 120px;
  background: lightgray;
  border-radius: 12px;
}