JSFiddle - React, Tailwind, and code Playground

by Farzad YZ

HTML

<div>
  <ul>
    <li>
      <span>Icon</span>
      Item 1
    </li>
    <li>
      <span>Icon</span>
      Item 2
    </li>
    <li>
      <span>Icon</span>
      Item 3
    </li>
    <li>

      Item 4
    </li>
    <li>
      <span>Icon</span>
      Item 5
    </li>
    <li>
      <span>Icon</span>
      Item 6
    </li>
    <li>
      Item 7
    </li>
    <li>
      <span>Icon</span>
      Item 8
    </li>
    <li>

      Item 9
    </li>
    <li>
      <span>Icon</span>
      Item 10
    </li>
  </ul>
</div>

CSS

div {
  width: 300px;
  height: 300px;
  background-color: #999;
  margin-left: 100px;
  overflow: auto;
  overflow-x: visible;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  height: auto;
}

li {
 position: relative;
 height: 300px;
}

li > span {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-60%);
}