JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>
<body>


<i class="fas fa-square" style="font-size:48px;color:#28a745"></i>
<i class="fas fa-square" style="font-size:48px;color:#17a2b8"></i>
<i class="fas fa-square" style="font-size:48px;color:#ffc107"></i>
<i class="fas fa-square" style="font-size:48px;color:#dc3545"></i>




</body>
</html>

CSS

.fa-star:hover {
    color: red !important;
}

JavaScript

$(".fas").click(function(event) {
		$(".fas").removeClass('fa-square fa-check-square').addClass('fa-square');
    $(this).addClass('fa-check-square');


});