JSFiddle - React, Tailwind, and code Playground
by surfine
HTML
<div class="menubar">
<span class="menubar-actionWrap">
<span class="menubar-action menubar-home"></span>
</span>
</div>
CSS
.menubar {
width: 100%;
padding: 7px 0 2px 7px;
position: fixed;
background: #444;
}
.menubar-action:hover { cursor: pointer; }
.menubar-home {
height: 32px; width: 32px;
background: url('http://www.surfixe.com/img/other/1771_home2.png') no-repeat center;
display: inline-block;
}
.menubar-action:clicked {
background: url('http://www.surfixe.com/img/other/1771_home.png') no-repeat center;
}
JavaScript
$('.menubar-home').on('click', function() {
$(this).css({'background': 'url(http://www.surfixe.com/img/other/1771_home.png)'});
});