JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree__list">
  <li class="tree__item">
    <div class="tree__item-text">Item 1</div>
    <ul class="tree__list">
      <li class="tree__item">
        <div class="tree__item-text">Sub Item 1</div>
        <ul class="tree__list">
          <li class="tree__item">
            <div class="tree__item-text">Sub Sub Item 1</div>
          </li>
          <li class="tree__item">
            <div class="tree__item-text">Sub Sub Item 2</div>
          </li>
          <li class="tree__item">
            <div class="tree__item-text">Sub Sub Item 3</div>
          </li>
          <li class="tree__item">
            <div class="tree__item-text">Sub Sub Item 4</div>
          </li>
        </ul>
      </li>
      <li class="tree__item">
        <div class="tree__item-text">Sub Item 2</div>
      </li>
      <li class="tree__item">
        <div class="tree__item-text">Sub Item 3</div>
      </li>
      <li class="tree__item">
        <div class="tree__item-text">Sub Item 4</div>
      </li>
    </ul>
  </li>
  <li class="tree__item">
    <div class="tree__item-text">Item 2</div>
  </li>
</ul>

CSS

.tree__list {
  padding: 0;
  padding-left: 20px;
}

.tree__item {
  list-style: none;
}

.tree__item-text {
  padding-left: 20px;
}

.tree__item-text:hover {
  background: #000;
  color: #fff;
}