JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <nav>
            <ul>
                <li><div class="logo"></div></li>
                <li><p class="userlink">username</p></li>
            </ul>
        </nav>
        <nav>
            <ul>
                <li><div class="logo"></div></li>
                <li><div class="logo"></div></li>
            </ul>
        </nav>
        <nav>
            <ul>
                <li><p class="userlink">username</p></li>
                <li><p class="userlink">username</p></li>
            </ul>
        </nav>
    </header>

CSS

header {
    background-color: #323d51;
    height: 600px;
}
li {
    display: inline-block;
    border: 5px solid mistyrose;
    height: 100px;
    width: 100px;
}
.logo {
    background-color: grey;
    height: 100px;
    width: 100px;
}
.userlink {
    height: 85px;
    color: white;
    border: 2px solid goldenrod;
}