JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container-outer">
    <div id="container-inner">
        <!-- Content goes here -->
    </div>
</div>

CSS

/* Scrollbar */
    ::-webkit-scrollbar {
        border: 0;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0);
    }
    ::-webkit-scrollbar-thumb {
        background-color: inherit; /* Inherits from outer container */
        border-radius: 20px;
    }

    /* Container */
    #container-outer {
        overflow-x: hidden;
        overflow-y: scroll; /* Horizontal-only scrolling */
        height: 400px;
        background-color: white; /* Initial color of the scrollbar */
        transition: background-color 1200ms;
    }
    #container-outer:hover {
        background-color: red; /* Hover state color of the scrollbar */
    }
    #container-inner {
        background-color: white; /* Masks outer container */
        font-size: 0;
        height: 10000px; /* Inherits from outer container */
        width: 10000px; /* Set to see the scrolling effect */
    }