JSFiddle - React, Tailwind, and code Playground

by sectioni

HTML

<div class="wrapper">
  <div>
    <ul>
    <li><h3>sdf df sdijr wafl;k qwroksal wasdlk was</h3></li>
    <li><h3>sdf df sdijr wafl;k wasdlk was</h3></li>
    <li><h3>sdf df sdijr wafl;k qwroksal wasdlk was</h3></li>
    <li><h3>sdf df sdijdsf r wafl;k qwroksal wasdlk was</h3></li>
    <li><h3>sdf df sdijr d  df dfswe ef ewf wafl;k qwroksal wdsfdsfasdlk was</h3></li>
    <li><h3>sdf df sdijr wafl;k wasdlk was</h3></li>
    </ul>
  </div>
  </div>

CSS

div.wrapper {
    width: 300px;
}

div {
  overflow-x: auto;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: block;
  width: min-content;
  background: red;
  white-space: nowrap;
}