JSFiddle - React, Tailwind, and code Playground

by Sam Liew

HTML

<div class="fav-icon"></div>
<div class="fav-icon"></div>
<div class="fav-icon"></div>
<div class="fav-icon"></div>
<div class="fav-icon"></div>

CSS

.fav-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('http://www.purpleghost.com/images/application/scry/star.png') 0 0 no-repeat;
    opacity: 0.3;
}

.fav-icon:hover {
    opacity: 0.6;
}
.fav-icon.active {
    opacity: 1 !important;
}

JavaScript

$('body').on('click', '.fav-icon', function() {
    $(this).toggleClass('active');
});