JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="modules">
        <div class="module">a</div>
        <div class="module">b</div>
        <div class="module">c</div>
        <div class="module">d</div>
        <div class="module">e</div>
        <div class="module">f</div>
        <div class="module">g</div>
        <div class="module">h</div>
        <div class="module">i</div>
        <div class="module">j</div>
        <div class="module">k</div>
        <div class="module">l</div>
    </div>
</div>

CSS

#container {
    width:300px;
    height: 60px;
    overflow: hidden;
}
#modules {
    height:90px; /* 40px - more place for scrollbar, is hidden under parent box */
    padding:5px;
    white-space:nowrap;
    overflow-x: scroll;
    overflow-y: hide;
	-webkit-overflow-scrolling:touch;
}
.module {
    display:inline-block;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    background:#ddd;
}
.module + .module {
    margin-left:5px
}