JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div>
        <ul class="php-file-tree">
            <li class="pft-directory"><a href="#">0015-301784</a>
                <ul>
                    <li class="pft-directory"><a href="#">01 - Auftrag</a>

                        <ul>
                            <li class="pft-file ext-xls"><a href="#">FP032881477</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP0331880091</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP0380092</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP00096</a>
                            </li>
                        </ul>
                    </li>
                    <li class="pft-directory"><a href="#">03 - Stüli/Pläne/Zeichnungen</a>

                        <ul>
                            <li class="pft-file ext-xls"><a href="#">FP032815474502</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP0328509</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP033216</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP03309229</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP033092580</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP0335299</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP03309301</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP03309598</a>
                            </li>
                            <li class="pft-file ext-xls"><a href="#">FP03309603</a>
                            </li>
                            <li...