JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
    <div id="test" class="test"></div>
</div>

CSS

* {margin: 0; padding: 0;}
html, body, .container {
    width:100%;
    height:100%;
}

.test {
    
    left: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    position:absolute;
    -moz-transition: 3s ease;
    background-color: red;
}

.animate {
    width: 100%;
    height: 100%;
}

JavaScript

var test = $("#test");

$("body").on("click", function () {

    if(test.hasClass("animate"))
          test.removeClass("animate");      
        
    else 
       test.addClass("animate");
       
})