JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<button class="makeBig">Grow!</button>

CSS

.box {

    background: red;
    width: 100px;
    height: 100px;
    margin: 10px;
    -webkit-transition: all 2s;
}

.big
{
   width: 300px;            
}

.circle {
    
    background: blue;
    border-radius: 50px;
    -webkit-transition-duration: .5s;
    
}

JavaScript

$('.box').on('mouseenter', function() {
    
    $(this).addClass('circle');            
    
})

$('.box').on('mouseleave', function() {
    
    $(this).removeClass('circle');            
    
})    
    
$('.makeBig').on('click', function() {
    
    $('.box').toggleClass('big');            
    
})