JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banner">
    <div id="bannerleft"></div>
    <div id="bannercenter">
        <div id="nav_content">
            <ul>
                <li>
                    <div><a href="../">Home</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="forum">Forums</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="market">Market</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="bannerright">
        <div id=accountcontent><a href="account"><img id="avatarsmall" src=""/>AccountName</a>
        </div>
    </div>
</div>

CSS

#banner {
    height: 30px;
    width: 100%;
    display: table;
    margin-bottom: 20px;
}
#bannerleft {
    display: table-cell;
    text-align: left;
    outline-color: black;
    outline-style: dashed;
    width: 33.33%;
}
#bannercenter {
    display: table-cell;
    text-align: center;
    outline-color: black;
    outline-style: dashed;
    padding: 0px;
    height:30px;
    width: 33.33%;
}
#nav_content {
    height: 30px;
    margin: 0 auto;
    padding: 0px;
    outline-color: green;
    outline-style: dashed;
}
#nav_content ul {
    height: 30px;
    margin: 0 auto;
    padding: 0px;
}
#nav_content ul li {
    display: inline-block;
    list-style: none;
    line-height: 30px;
}
#nav_content ul li div {
    height: 30px;
}
#bannerright {
    display: table-cell;
    text-align: center;
    outline-color: black;
    outline-style: dashed;
    padding: 0px;
    height:30px;
    width: 33.33%;
}
#accountcontent {
    outline-color: green;
    outline-style: dashed;
    height:30px;
}
#avatarsmall {
    height: 30px;
    width: 30px;
    padding: 0px;
    margin: 0px;
}
}