JSFiddle - React, Tailwind, and code Playground

HTML

<div id="square" class="short">
just a div
</div>
 <button id="button" type="button">Fire transition</button> 
<style>
.short{
  width: 100px;
  height: 100px;
  background-color: green;
}
.large{
   transition: width .2s, height 2s, background-color 2s;
   height: 200px;
   background-color: red;
   width: 200px;
}
</style>

JavaScript

var button = document.getElementById("button");

button.addEventListener("click", function(){   
var div = document.getElementById("square");
div.className="large";
});