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
$('.click_me').on('click', function() {
$('.circle').addClass('clicked');
});