JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="small"></div>

CSS

div.small {
    background: #f00;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    transition: all .5s;
}

div.big {
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: 0;
    left: 0;
    margin-left: 0;
    border-radius: 0;
    background: #0f0;
}

JavaScript

$(window).on("click", ".small", function() {
    me = this;
    setTimeout( function() { $(me).addClass("big"); }, 1 );
});

$(window).on("click", ".big", function() {
    me = this;
    setTimeout( function() { $(me).removeClass("big"); }, 1 );
});