JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myclass transition">Hello overrided transitions!</div>

<a href="#" id="effects">Toggle effects</a>

CSS

.myclass{
    color:white;
    position: relative;
    background: blue;
    width: 300px;
    height: 50px;
    top: 10px;
    left: 10px; 
}
.transition{
    transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; 
}
.active{
    background: red;
    width: 400px;
    height: 100px;
    top: 100px;
    left: 100px;
    font-size: 2em;
}
#effects{
    position:absolute;
    bottom:100px;
}

JavaScript

jQuery('#effects').on('click',function(){
    jQuery('.myclass').toggleClass('active');
});