JSFiddle - React, Tailwind, and code Playground

HTML

<div>
   <ul>
     <li>one</li>
     <li>two</li>
     <li>three </li>
     <li>four</li>
     <li>one</li>
     <li>two</li>
     <li>three </li>
     <li>four</li>
     <li>one</li>
     <li>two</li>
     <li>three </li>
     <li>four</li>
     <li>one</li>
     <li>two</li>
     <li>three </li>
     <li>four</li>
     <li>one</li>
     <li>two</li>
     <li>three </li>
     <li>four</li>
     <li>one</li>
     <li>two</li>
     <li>three </li>
     <li>four</li>
     <li>one</li>
     <li>two</li>
     <li>three </li>
     <li>four</li>
     <li>one</li>
     <li>two</li>
     <li>three </li>
     <li>four</li>
   </ul>
 </div>

CSS

div {width:500px}
ul{
    list-style-type:none;
    white-space:nowrap;
    overflow-x:auto;
}

li{
    display:inline-block;
    width:200px;
}