JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="inner">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>    
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>    
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>    
        <div class="item item-9">9</div>
        <div class="item item-10">10</div>
        <div class="item item-11">11</div>    
        <div class="item item-12">12</div>
        <div class="item item-13">13</div>
        <div class="item item-14">14</div>    
        <div class="item item-15">15</div>
        <div class="item item-16">16</div>
        <div class="item item-17">17</div>    
        <div class="item item-18">18</div>  
        <div class="item item-19">19</div>
        <div class="item item-20">20</div>    
        <div class="item item-21">21</div>
        <div class="item item-22">22</div>
        <div class="item item-23">23</div>    
        <div class="item item-24">24</div>
        <div class="item item-25">25</div>
        <div class="item item-26">26</div>    
        <div class="item item-27">27</div>                    
    </div>
</div>

CSS

.row { border: 1px solid red; height: 50px; overflow: hidden; }
.row .inner { width: 1000px; }
.row .inner .item { box-shadow: inset 0 0 8px blue; width: 50px; height: 50px; float: left; line-height: 50px; }