JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">        
               <ul>
               <li><a href="#">ter</a></li>
               <li><a href="#">redg</a></li>
               <li><a href="#">ryer More</a></li>
               <li><a href="#">More</a></li>
               </ul>           
</div>

CSS

#navigation { 
 width: 100%;
 height: 50px;
 clear: both;
 color: #333;
background: #2b2b2b; 
background: -moz-linear-gradient(top,  #2b2b2b 0%, #171717 49%, #000000 50%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b2b2b), color-stop(49%,#171717), color-stop(50%,#000000), color-stop(100%,#000000)); 
}
#navigation ul{
    margin:0 auto; width:auto;
    padding:0;
}
#navigation ul li{
    display:inline-block;
    color:#fff;
    font:12px Verdana, Geneva, sans-serif;
    padding:0 25px;
    background:url(images/nav_img.jpg) no-repeat center top;
    height:50px;
}
#navigation ul li a{
    display:inline-block;
    color:#fff;
    font:12px Verdana, Geneva, sans-serif;
    text-decoration:none;
    line-height:35px; 
}