JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<ul id="navBar"> 
            <li id="homeCurrent"><a href="#">Home</a></li> 
            <li id="about"><a href="#">About</a></li> 
            <li id="properties"><a href="#">Properties</a></li> 
            <li id="tenants"><a href="#">Tenants</a></li> 
            <li id="landlords"><a href="#">Landlords</a></li> 
            <li id="contact"><a href="#">Contact Us</a></li> 
        </ul>

CSS

ul#navBar{
    width: 860;
    height: 40px;
    margin: 0 auto;
    float: right;
    list-style: none;
}
ul#navBar li{
    display: inline;
}

ul#navBar li a{
    padding:10px;
    border-left:1px solid #d5d5d5; 
    border-right:1px solid #5b5b5b;
    float: left;
    text-align:center;
    width: 130px;
    text-decoration:none;
    text-shadow:1px 1px 1px #d5d5d5;
    font-weight:bold;
    color:#343434;
    font-family:Arial;
background: rgb(210,210,210);
background: -moz-linear-gradient(top, rgba(210,210,210,1) 50%, rgba(172,172,172,1) 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(210,210,210,1)), color-stop(50%,rgba(172,172,172,1)));
background: -webkit-linear-gradient(top, rgba(210,210,210,1) 50%,rgba(172,172,172,1) 50%);
background: -o-linear-gradient(top, rgba(210,210,210,1) 50%,rgba(172,172,172,1) 50%);
background: -ms-linear-gradient(top, rgba(210,210,210,1) 50%,rgba(172,172,172,1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d2d2', endColorstr='#acacac',GradientType=0 );
background: linear-gradient(top, rgba(210,210,210,1) 50%,rgba(172,172,172,1) 50%);
}