JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<i class="fa fa-minus-circle"></i>

CSS

.fa {
    cursor: pointer;
    font-size: 50px;
}
.fa-check-circle {
    color: green
}
.fa-minus-circle {
    color: red
}

JavaScript

$(".fa").mouseover(function (e) {
    if (!$(this).hasClass('fa-spin')) {
        $(this).removeClass('fa-minus-circle')
        $(this).addClass('fa-check-circle')
    }
}).mouseout(function (e) {
    if (!$(this).hasClass('fa-spin')) {
        $(this).addClass('fa-minus-circle')
        $(this).removeClass('fa-check-circle')
    }
}).click(function () {
    $(this).removeClass()
    $(this).addClass('fa fa-cog fa-spin')
    setTimeout(function () {
        $('.fa').removeClass().addClass('fa fa-minus-circle')
    }, 1000);
});