JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    
    <ul id="scroll-container">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
</div>

CSS

*{
    margin:0;
    padding:0;
}

ul{
    list-style:none;
    white-space:nowrap;
    padding:10px;
    overflow-x:scroll;
    overflow-y:hidden;
}
ul li{
    display:inline-block;
    width:50%;
    white-space:initial;
    border:1px solid red;
    height:100px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

#container{
    background:#fff;
    overflow:hidden;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

#container.shadow-right{
    box-shadow: inset -7px 0px 10px -7px blue;
    -webkit-box-shadow: inset -7px 0px 10px -7px blue;
    -moz-box-shadow: inset -7px 0px 10px -7px blue;
}

#container.shadow-left{
    box-shadow: inset 7px 0px 10px -7px blue;
    -webkit-box-shadow: inset 7px 0px 10px -7px blue;
    -moz-box-shadow: inset 7px 0px 10px -7px blue;
}