JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Here is my Text</h1>

<div class="box"></div>

CSS

h1 { color: #000; font: bold 62px arial; margin:20px 10px; cursor:pointer; } 

.box { float:left; width:300px; height:300px; background-color: #000; margin:30px 20px; cursor:pointer; }

JavaScript

$(function() {

    var Text = $('h1');
    var Box = $('.box');

    Text.click(function() {
        Text.animate({'color':'#f00'},600)
            .delay(200).animate({'color':'#ff0'},600)
            .delay(200).animate({'color':'#000'},600);
    });
    
    Box.click(function() {
        Box.animate({'background-color':'#f00'},600)
            .delay(200).animate({'background-color':'#ff0'},600)
            .delay(200).animate({'background-color':'#000'},600);
    });
    
});