JSFiddle - React, Tailwind, and code Playground

by duncan

HTML

<header id="header">    
    <nav id="menu">
    	<ul id="nav">
    		<li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact Us</a></li>	
        </ul>
    </nav>
</header>

CSS

#header {
    background: black;
}
#menu {
	background: #bf4040;
	position: relative;
	width: 95%;
	margin: 0 auto;
    overflow:hidden
}
ul#nav {
	margin: 0;
	padding: 0 20px;
	width: auto;
	overflow: hidden;
	float: right;
}
ul#nav li ul {
	float: right;
}
	ul#nav li {
		float: left;
		padding: 0;
		list-style: none;
		list-style-image: none;
		margin: 2px 2px;
	}
	ul#nav li a {
		font-size: 12px;
		font-weight: bold;
		text-decoration: none;
		line-height: 37px;
		display: block;
		text-align: left;
		padding: 0px 15px;
		white-space: nowrap;
		text-transform: uppercase;
		color: #000;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
	}
ul#nav li.current a, ul#nav li a:hover {
		color: #ffe200;
		background: #3d5a81;
	}