JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>Banana</li>
        <li>Molten Boron</li>
        <li>Steak sauce</li>
        <li>Unicorn tears</li>
        <li>Ground-up griffins</li>
        <li>Semi-alive hobgoblins (frozen)</li>
    </ul>
</div>

CSS

div { width: 500px;
     overflow-x: auto;
}

ul {
    min-width: 2px;
    overflow: visible;
    width: auto;
}

li {
    background: #ccc;
    display: inline-block;
    margin: 0 5px;
    padding:2px 5px;
}