JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tree1">
    <ul class="jqtree-tree">
        <li class="jqtree-folder">
            <div>
                <a class="jqtree-toggler">»</a>
                <span class="jqtree-title">Parent1</span>
            </div>
            <ul>
                <li>
                    <div>
                        <span class="jqtree-title">Parent1-child1</span>
                    </div>
                </li>
                <li class="jqtree-folder">
                    <div>
                        <a class="jqtree-toggler">»</a>
                        <span class="jqtree-title">Parent1-child2-Subparent1</span>
                    </div>
                    <ul>
                        <li>
                            <div>
                                <span class="jqtree-title">Parent1-child2-Subparent1-child1</span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <span class="jqtree-title">Parent1-child2-Subparent1-child2</span>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <div>
                <span class="jqtree-title">Parent2</span>
            </div>
        </li>
        <li class="jqtree-folder">
            <div>
                <a class="jqtree-toggler">»</a>
                <span class="jqtree-title">Parent3</span>
            </div>
            <ul>
                <li>
                    <div>
                        <span class="jqtree-title">Parent3-child1</span>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

ul li {
    padding-left: 10px;
    color: blue;
}
ul li li {
    color: orange;
}
ul li li li {
    color: green;
}