JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myselector-one" id="a">Click Me</div>
<div class="myselector-two" id="b">Click Me</div>

CSS

.myselector-one {
    top:10em;
    left:0em;
    width:10em;
    height:5em;
    transition:all 2s;
    background-color:#ffaa99;
    position:absolute;
}
.myselector-two {
    top:4em;
    left:30em;
    width: 15em;
    height: 8em;
    transition:all 2s;
    background-color:#aaff99;
    position:absolute;
}
.animate-complete
{
    top: 50%;
    left:50%;
    width: 100%;
    height: 60%;
}

JavaScript

document.getElementById("a").onclick = function()
{
    if (this.className.indexOf("animate-complete")!=-1)
    {
        this.className = this.className.replace(/animate\-complete/g,"");
    }
    else
    {
        this.className += " animate-complete";
    }
}
var bIsTransitioned = false;
document.getElementById("b").onclick = function()
{
    if (!bIsTransitioned)
    {
        this.style.top = "50%";
        this.style.left = "50%";
        this.style.width = "100%";
        this.style.height = "60%";
    }
    else
    {
        this.style.top = "";
        this.style.left = "";
        this.style.width = "";
        this.style.height = "";        
    }
    bIsTransitioned = !bIsTransitioned;
}