JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree">
     <li><div>Animals</div>
       <ul>
         <li><div>Birds</div>
           <ul>
             <li class="last"><div>Eagle</div></li>
           </ul>
         </li>
           <li><div>Mammals</div>
           <ul>
             <li><div>Elephant</div></li>
             <li class="last"><div>Cats</div>
               <ul>
                 <li><div>Lion</div></li>
                 <li class="last"><div>Tiger</div></li>
               </ul>
             </li>
           </ul>
         </li>
         <li class="last"><div>Reptiles</div>
           <ul>
             <li><div>Snake</li>
             <li class="last"><div>Turtle</div></li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>

CSS

ul.tree {
    line-height: 1.3em;
    list-style-type: none;
    padding: 0;
    border: 1px solid black;
}
ul.tree ul {
    counter-reset: x;
    list-style-type: none;
    padding: 0;
}
ul.tree li {
    clear: both;
    overflow: hidden;
}
ul.tree div {
    display: block;
    float: left;
    padding-left: 1000px;
    margin-left: -1000px;
    padding-right: 10000px;
    margin-right: -10000px;
}
ul.tree div:hover {
    background: red;
}
ul.tree ul li:before {
    counter-increment: x;      
    opacity: .0;
    font-family: monospace;
    letter-spacing: 10px;
    content: counters(x, "", disc);
    float: left;
    position: relative;
    left: -1000px;
    visibility: hidden;
}