JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="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)));
        document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('gentags').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
    }