JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<div class="powerbar">
    <div class="logo-wrap" data-region="logoHeader" data-qa="logoHeader"><div data-qa="logo-container" class="logo-container"><h1>
    <a href="/" title="Home" class="logo">Bottomline Technologies</a>
</h1>
</div></div>
    <div class="menu-wrap" data-region="menuHeader" data-qa="menuHeader"><div data-qa="menubar-container"><nav class="glu-menu">
    <div class="toggle" data-action="menuToggle" data-qa="glu-menu-toggle-wrap">
        <button type="button" class="btn btn-tertiary" title="Open/Close menu" data-qa="glu-menu-toggle-btn">
            <span class="icon-rows">&nbsp;</span>
        </button>
    </div>
    <ul class="top" role="menubar" tabindex="0" aria-controls="main">
        <li class="parent mobile-user">
            <span id="gmp-USER" class="item-USER has-dd" aria-haspopup="true" tabindex="-1">
            <span class="icon-person" role="presentation"></span>
                ARTHUR Two US
                <span class="caret" role="presentation"></span>
            </span>
            <ul class="dropdown" role="menu" aria-hidden="true" aria-labelledby="gmp-USER">
                <li role="presentation" class="ie-fix-container">
                    <iframe src="about:blank" class="ie-fix"></iframe>
                </li>
                    <li>
                        <a class="item-changePassword" href="#" data-action="changePassword" aria-controls="main" tabindex="-1">
                            Change Password
                        </a>
                    </li>
                    <li>
                        <a aria-controls="main" class="item-externalLinkNewWindow_DYNAMIC_LRNCTR" href="//USERMENU/externalLinkNewWindow/DYNAMIC_LRNCTR" role="menuitem" tabindex="-1">
                            Learning Center
                        </a>
                    </li>
                    <li>
                        <a aria-controls="main" class="item-externalLinkNewWindow_DYNAMIC_RSTSECQ"...