JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="table">
        <div class="tr">
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
            <div class="td">
                <div class="box"></div> 
            </div> 
        </div>
    </div>
</div>

CSS

#wrapper {
    width: 680px; 
    height: 160px; 
    overflow-x: scroll;
    white-space:no-wrap;
}
.table {
    display:table;
}
.tr {
    display:table-row;
}
.td {
    display:table-cell;
}
.box {
    background-color:#000;
    margin:20px;
    width:100px;
    height:100px;
}