JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
    <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> 
</body>
</html>

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{
        position: relative;
        display:inline-block;
        color:#fff;
        font:12px Verdana, Geneva, sans-serif;
        padding:0 25px;
        background:url(images/nav_img.jpg) no-repeat center top;
        width: 100px;
        height:50px;
    }
    #navigation ul li a{
        position: absolute;
        top: 30px;
        display:inline-block;
        color:#fff;
        font:12px Verdana, Geneva, sans-serif;
        text-decoration:none;
        height:50px;

    }