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</div></li>
                    <li class="last"><div>Turtle</div></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

ul {
    list-style: none;
    
    padding: 0;
    margin: 0;
}

div:hover {
    background-color: #f4f4f4;
}

JavaScript

$(".tree div").each(function()
{
    var padding = $(this).parents("ol, ul").length * 20 + "px";
    
    $(this).css("padding-left", padding);
});