JSFiddle - React, Tailwind, and code Playground

HTML

<div id="we">
                <div id="header_bar">
		         <div id="gradient"></div>
 </div>

			<div id="logo"></div>
			
			<ul id="menu">
				<li><a id="Home">Home</a></li> 
				<li><a id="Gallery">Gallary</a></li> 
				<li><a id="News">News</a></li> 
				<li><a id="About">About Us</a></li> 
				<li><a id="Contact">Contact</a></li> 
			</ul>

CSS

#we{
 position:relative; 
 width:615px;
height:62px;
top:18px;
left:333px
}

#header_bar {
background:url('http://s1.ipicture.ru/uploads/20130413/e3tuinUK.png');
 width:615px;
height:62px;
position:absolute;
top:0px;
left:0;
}
 
#gradient{
background:-moz-linear-gradient( rgba(255,255,255,0) 40%,rgba(255,255,255,.9)85%);
   width:615px;
height:62px;  
   top:0px;
left:0;
position:absolute;    
}


#logo{
background:url('http://s1.ipicture.ru/uploads/20130413/wVHf1B43.png') no-repeat;
width:30%;
height:100%;
margin:5px 0 0 20px;
float:left;

}

#menu{
margin:0px auto;
padding-left:200px;
position:absolute;
}

 li{
display:inline-block;
padding:10px 12px;
margin:10px 0 0 0;
}

 li:hover{
display:inline-block;
padding:10px 12px;
background:#FEFEFD;
border:1px solid #FEFEFD;
border-radius:7px 7px 0 0;
font: bold 13px Arial, sans-serif;
color:#397C0F;
box-shadow: 0 -0.1px 0 rgba(0,0,0,.5);
}

#Home {
font: bold 13px Arial, sans-serif;
color:#6B6C6A;
}

#Gallery {
font: bold 13px Arial, sans-serif;
color:#6B6C6A;
border:1px solid transparent;
}

#Gallery:hover {
font: bold 13px Arial, sans-serif;
color:#397C0F;
}

#News {
font: bold 13px Arial, sans-serif;
color:#6B6C6A;
}

#About {
font: bold 13px Arial, sans-serif;
color:#6B6C6A;
}

#Contact {
font: bold 13px Arial, sans-serif;
color:#6B6C6A;
}