JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square"></div> <br/>
<div class="square"></div> <br/>
<div class="square"></div> <br/> 
<div class="square"></div>

CSS

.square{
    width: 100px;
    height: 100px;
    background-color: red;
}

.rectangle{
    width: 200px;
    height: 100px;
    background-color: green;
}

JavaScript

$("div").on("<changedClass></changedClass>", function(){
    $(this).addClass("rectangle");
});

$(document).on("click", "div", function(){
    $(this).removeClass("square");               
    $(this).trigger("changedClass");
});