JSFiddle - React, Tailwind, and code Playground

by powerMugen

HTML

<ul id="nav">
    <li class="type-link depth-1 ">
    <a href="/hybrigserv/www/public/"><span>Home</span></a>
    </li><li class="type-article depth-1  has-children">
    <a class="has-children-trigger" href="/hybrigserv/www/public/contents/company"><span>Company</span><i></i></a>
        <ul>
    <li class="type-article depth-2 ">
    <a href="/hybrigserv/www/public/contents/company/career-manquant"><span>Career (manquant)</span></a>
    </li><li class="type-article depth-2 ">
    <a href="/hybrigserv/www/public/contents/company/management"><span>Management</span></a>
    </li>    </ul>
    </li><li class="type-link depth-1 ">
    <a href="/hybrigserv/www/public/contact"><span>Contact us</span></a>
    </li><li class="type-section depth-1  has-children">
    <a class="has-children-trigger" href="#"><span>Our services</span><i></i></a>
        <ul class="children">
    <li class="type-article depth-2  has-children">
    <a class="has-children-trigger" href="/hybrigserv/www/public/contents/our-services/discover"><span>Discover</span><i></i></a>
        <ul class="children">
    <li class="type-article depth-3  has-children">
    <a class="has-children-trigger" href="/hybrigserv/www/public/contents/our-services/discover/ultimate-y2h-manque"><span>ULTimate Y2H (manque)</span><i></i></a>
        <ul class="children">
    <li class="type-article depth-4 ">
    <a href="/hybrigserv/www/public/contents/our-services/discover/ultimate-y2h-manque/ultimate-deliverables"><span>ULTImate Deliverables</span></a>
    </li><li class="type-article depth-4 ">
    <a href="/hybrigserv/www/public/contents/our-services/discover/ultimate-y2h-manque/specific-bait"><span>Specific baits</span></a>
    </li>    </ul>
    </li><li class="type-article depth-3 ">
    <a href="/hybrigserv/www/public/contents/our-services/discover/ultimate-libraries-a-faire"><span>ULTImate Libraries</span></a>
    </li><li class="type-article depth-3 ">
    <a...