JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="top-menu">
				<ul class="clearfix">
					<li><a href="#">home</a></li>
					<li><a href="#">portfolio</a></li>
					<li><a href="#">blog</a></li>
					<li><a href="#">pages</a></li>
					<li><a href="#">features</a></li>
					<li><a href="#">contact</a></li>
					<div class="top-social">
						<a href="#" class="icon-rss"></a>
						<a href="#" class="icon-fb"></a>
						<a href="#" class="icon-tw"></a>
					</div>
				</ul>
			</nav>

CSS

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {clear: both;}

.top-menu ul {
	width: 950px;
	outline: 1px solid #ccc;
	background: #393939;
    list-style: none;
}

.top-menu ul li {
	float: left;
}

.top-menu ul li a {
	display: block;
	padding: 19px 34px;
	background: #393939;
	color: #d0d0d0;
	text-transform: uppercase;
    text-decoration: none;
	font: 13px Tahoma, serif;
	border-right: 1px solid #464646;
}


.top-social a {
	margin-right: 3px;
	display: inline-block;
	width: 17px;
	height: 17px;
	border: 1px solid red;
	background: url(img/social-sprite.png);
}

.top-social a.rss {
	background-position: 0 0;
	outline: 1px solid red;
}

.top-social a.fb {
	background-position: 0 0;
	outline: 1px solid red;
}

.top-social a.tw {
	background-position: 0 0;
	outline: 1px solid red;
}