JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="http://jquery.com" title="jQuery">jQuery</a></li>
    <li><a href="http://jqueryui.com" title="jQuery UI">jQuery UI</a></li>
    <li><a href="http://jquerymobile.com" title="jQuery Mobile">jQuery Mobile</a></li>
    <li><a href="http://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
</ul>

CSS

ul {
    float: left;
    display: block;
    -webkit-border-radius: 5px;
    -mox-border-radius: 5px; 
    border-radius: 5px;
    padding: 0 10px;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    border: 1px solid #e26a12;
}
ul li {
    list-style: none;
    float: left;
    display: block;
}

ul li a {
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 15px;
    display: block;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 1px #815200;
    opacity: 0.5;
}

ul li a:hover {
    text-shadow: 0 -1px 1px #815200;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');   
}

JavaScript

jQuery(function($){
    $("li a").mouseover(function(){
        $(this).animate({ opacity: 1 }, 250); 
    }).mouseout(function(){
        $(this).animate({ opacity: 0.5 }, 250);  
    });
});