JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle">
</div>

<div class="click_me"> Click Me!
</div>

CSS

.circle {
  position: absolute;
  width: 10%;
  height: 10%;
  border-radius: 50%;
  background: red;
}

.clicked {
  animation: rectangularize 3s ease-in-out infinite;
}

.click_me {
  position: absolute;
  width: 10%;
  height: 10%;
  left: 50%;
  background: yellow;
  cursor: pointer;
}
@keyframes rectangularize {
  30% {
    border-radius: 0%;
  }
}

JavaScript

$(document).on('click', '.click_me', function() {
  
    console.log('TEST');
    $('.circle').addClass('clicked');
});

/* did not work? */
$('.click_me').onClick(function(){
	$('.circle').addClass('.clicked');
});