JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<header id="navmenu">
    <ul>
        <li>
            <label>Welcome <span id="firstName"></span></label>
        </li>
        <li>
            <a href="#" onclick="return false;">Option One</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Option Two</a>
        </li>
    </ul>
</header>

CSS

#navmenu {
	background-color: rgba(250, 250, 210, 1);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.8);
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.8);
	box-shadow: 0 0 3px rgba(0,0,0,0.8);
	text-align:right;
	height:42px;
	width:100%
}
#navmenu ul {
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
	padding: 0 12px;
	height:42px;
}
#navmenu ul li {
	display:inline-block;
	padding: 0 8px;
	height: 100%;
	border-right: solid 1px black;
}
#navmenu ul li:last-child {
	border-right: 0;
}
#navmenu a {
	text-decoration:none;
    display:inline-block;
    height:100%;
}