JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<div id="zz20_V4QuickLaunchMenu" class="s4-ql">
    <div class="menu vertical menu-vertical">
        <ul class="root static">
            <li class="static"><a class="static menu-item" href="/nbp/executives/_layouts/viewlsts.aspx?BaseType=1"><span class="additional-background"><span class="menu-item-text">Libraries</span></span></a>

                <dl class="static">
                    <dt class="static"><a class="static menu-item" href="/nbp/executives/LastName%20FirstName%20%20PMD/Forms/By%20Year.aspx"><span class="additional-background"><span class="menu-item-text">Doe, Jane</span></span></a>

                    </dt>
                    <dd class="static"><a class="static menu-item" href="/nbp/executives/LastName%20FirstName/Forms/By%20Year.aspx"><span class="additional-background"><span class="menu-item-text">Mgmt Docs</span></span></a>

                    </dd>
                    <dt class="static selected"><a class="static selected menu-item" href="/nbp/executives/Doe%20Jon/Forms/By%20Year.aspx"><span class="additional-background"><span class="menu-item-text">Doe, Jon</span><span class="ms-hidden">Currently selected</span></span></a>

                    </dt>
                    <dd class="static"><a class="static menu-item" href="/nbp/executives/Doe%20Jon%20%20Mgmt%20Docs/Forms/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">Mgmt Docs</span></span></a>

                    </dd>
                    <dt class="static"><a class="static menu-item" href="/nbp/executives/test/Forms/AllItems.aspx"><span class="additional-background"><span class="menu-item-text">test</span></span></a>

                    </dt>
                </dl>
            </li>
        </ul>
    </div>
</div>

CSS

.root dl {
    margin: 0 0 0 2em;
}
.root dl dd {
    margin-bottom: 1em;
}