JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree">
    <li><a>Item1</a></li>
    <li><a>Item2</a>
        <ul>
            <li>
             <a style="padding-left:30px">Item3</a>
            </li>
        </ul>
    </li>
</ul>

CSS

ul.tree, ul.tree ul {
      list-style:none;
      margin:0;
      padding:0;
      font-family: Arial, sans-serif;
      font-size: 12px;
    }
    
    ul.tree a {
      display: block;
      height:30px;
      line-height: 30px;
      padding-left: 15px;
      border-bottom-width: 1px;
      border-bottom-color: lightgray;
      border-bottom-style: solid;
    }

    ul.tree a:hover {
      background-color: #DDDDDD;
    }

JavaScript

/* right now I have to use js to update the padding on each <a> element */