JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
</ul>

CSS

body {
  margin: 0;
  padding: 0;
}

ul {
    /** Propiedades específicas del ul */
    list-style-type: none;
    width: 100%;
    white-space: nowrap;
    padding: 0;
    
    /** Aquí viene lo chido */
    position: relative;
    overflow-y: none;
    overflow-x: auto;
    background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%, 20px 100%, 20px 100%, 20px 100%;
    background-attachment: local, local, scroll, scroll;
}

ul li {
    padding: 5px 10px;
    display: inline-block;
}