JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gentags">
    <div class="item">123</div>
    <div class="item">123</div>
    <div class="item">123</div>
</div>

<div class="gentags">
    <div class="item">123</div>
    <div class="item">123</div>
    <div class="item">123</div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  background: #100e17;
  -ms-overflow-style: none;  // IE 10+
  overflow: -moz-scrollbars-none;  // Firefox
}

.gentags {
	width: 100%;
  padding: 0 10px;
  overflow-x: auto; /**/
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 75%;
  height: 150px;
  margin: 10px;
  background: red;
}

::-webkit-scrollbar {
display: none;
width: 0px;
background: transparent;
}

JavaScript

function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
       
        e.target.closest('.gentags').scrollLeft -= (delta*40);
        e.preventDefault();
}

for (const elem of document.querySelectorAll('.gentags')) {
	elem.addEventListener('wheel', scrollHorizontally);
}