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{
    -webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
    -moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
    -o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
    transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
}
.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');
});