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, ul.tree ul {
    list-style-type: none;
    padding: 0px;
  }

  ul.tree li div { 
    padding-left: 10px;
  }
  ul.tree li li div { 
    padding-left: 20px;
  }
  
ul.tree li div:hover {
    background-color: red;
  }