JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css">
<a href="#" class="ui-button"><span class="ui-icon ui-icon-locked"></span></a>
<a href="#" class="ui-button"><span class="ui-icon ui-icon-bookmark"></span></a>
<a href="#" class="ui-button"><span class="ui-icon ui-icon-home"></span></a>
<a href="#" class="ui-button"><span class="ui-icon ui-icon-disk"></span></a>
<a href="#" class="ui-button"><span class="ui-icon ui-icon-circle-check"></span></a>

CSS

.ui-button {
    height: 17px;
    width: 17px;
    border: 1px solid #ccc;
}

JavaScript

$(".ui-button").hover(function(){
    $(this).stop().fadeTo(300, 1);
}, function(){
    $(this).stop().fadeTo(300, 0.4);
}).fadeTo(0, 0.4);