JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
    <div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="primary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
    <div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
</div>

CSS

#main :first-child { margin-left: -80px; }

#main { 
    background: gray;
    width: 530px;
    height: 200px;
    overflow: scroll;
    white-space: nowrap;
}
.secondary, .primary {
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
}
.secondary {
    background: #009;
    width: 50px;
    height: 50px;
}
.primary {
    background: #900;
    width: 300px;
    height: 300px;
}