JSFiddle - React, Tailwind, and code Playground

HTML

<div class='foo'>BLAH BLAH BLAH</div>

CSS

.foo {
    border: 1px solid black;
    width: 400px;
    height: 400px;
    -moz-transition: all 10s linear;
}

.foo.bar {
    width: 100px;
}

.foo.baz {
    height: 100px;
}

JavaScript

setTimeout(function() {
    document.querySelector('div').className = 'foo bar';
    setTimeout(function() {
        document.querySelector('div').className = 'foo baz';
    }, 1000);
}, 1000);