JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>HEADER</li>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item10</li>
        <li>Item11</li>
        <li>Item12</li>
        <li>Item13</li>
        <li>Item14</li>
        <li>Item15</li>
        <li>Item16</li>
        <li>Item17</li>
        <li>Item18</li>
        <li>Item19</li>
        <li>Item20</li>
        <li>Item21</li>
        <li>Item22</li>
        <li>Item23</li>
        <li>Item24</li>
        <li>Item25</li>
        <li>Item26</li>
        <li>Item27</li>
        <li>Item28</li>
        <li>Item29</li>
        <li>Item30</li>
        <li>Item31</li>
        <li>Item32</li>
        <li>Item33</li>
        <li>Item34</li>
        <li>Item35</li>
        <li>Item36</li>
        <li>Item37</li>
        <li>Item38</li>
        <li>Item39</li>
        <li>Item40</li>
        <li>Item41</li>
        <li>Item42</li>
        <li>Item43</li>
        <li>Item44</li>
        <li>Item45</li>
        <li>Item46</li>
        <li>Item47</li>
        <li>Item48</li>
        <li>Item49</li>
        <li>Item50</li>
    </ul>
</div>

CSS

* {
    margin:0; padding:0;
}
div {
    width:100%;
    white-space:nowrap;
    overflow-x:scroll;
    border:1px solid blue;
}
ul {
    list-style-type:none;
}
li {
    border:1px solid black;
    display:inline-block;
    width:80px;
}