JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainCont" id="itemScroll">
    <div class="itemRow">
      <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>
  </div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.mainCont {
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  scroll-snap-align: center;
}

#itemScroll {
  cursor: pointer;
  overflow-x: hidden;
}

#itemScroll.active {
  cursor: grabbing;
}

.itemRow {
  width: max-content;
  min-width: 100%;
  height: 100%;
  max-height: 400px;
  padding: 0 5vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  transform-style: preserve-3d;
}

.item {
  width: 100px;
  height: 100px;
  max-width: 400px;
  max-height: 100%;
  background-color: red;
}

.item.active {
  background-color: green;
}

JavaScript

// horizontal drag scroll for items
const itemScroll = document.querySelector('#itemScroll');
var isDown = false;
var startX;
var scrollLeft;

itemScroll.addEventListener('mousedown', (e) => {
  isDown = true;
  itemScroll.classList.add('active');
  startX = e.pageX - itemScroll.offsetLeft;
  scrollLeft = itemScroll.scrollLeft;
});
itemScroll.addEventListener('mouseleave', () => {
  isDown = false;
  itemScroll.classList.remove('active');
});
itemScroll.addEventListener('mouseup', () => {
  isDown = false;
  itemScroll.classList.remove('active');
});
itemScroll.addEventListener('mousemove', (e) => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX - itemScroll.offsetLeft;
  itemScroll.scrollLeft = scrollLeft - (x - startX);
});

// click an item to change bg-color
const items = document.querySelectorAll('.item');

for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function (e) {
    this.classList.toggle('active');
  });
}