JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<div id="menu-bg">
    <div id="menu">
    <ul id="main">
      <li class="current_page_item"><a href="#">Homepage</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
      </ul>
      <ul id="feed">
      <li><a href="#">Entries RSS</a></li>
      <li><a href="#">Comments RSS</a></li>
    </ul>
  </div>
  </div>

CSS

body {
	margin: 0;
	padding: 0;
	background: #191E1A;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FCFFFD;
}
#menu-bg {
	background: #1E3227;
	height: 45px;
}

#menu {
	width: 1000px;
	margin: 0 auto;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	margin: 0 3px 0 0;
	padding: 12px 15px 10px 15px;
	border: none;
	text-decoration: none;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #DDBB04;
}

#menu a:hover {
	margin: 0 3px 0 0;
	background: #191E1A;
	border-bottom: 3px solid #DDBB04;
	color: #FFFFFF;
}

#menu .current_page_item a {
	background: none;
	margin: 0 3px 0 0;
	background: #191E1A;
	border-bottom: 3px solid #DDBB04;
	color: #FFFFFF;
}