JSFiddle - React, Tailwind, and code Playground

HTML

<div id="square">
    <div id="circle"></div>
</div>

CSS

#circle {
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: black;
    position: relative;
}

#square {
    width: 200px;
    height: 200px;
    border: 1px dashed black;
    position: absolute;
}

JavaScript

$('#square').click(function() {
    $('#circle').width(1).height(1).css('left', ($('#square').width() / 2) + 'px').css('top', ($('#square').height() / 2) + 'px');
    
    var intervalID = setInterval(function() {
        var c = $('#circle');
        c.width(c.width() + 2).height(c.height() + 2).css('left', (c.position().left - 1) + 'px').css('top', (c.position().top - 1) + 'px');
        if (c.width() >= 200) {
            clearInterval(intervalID);
        }
    }, 25);
});

$('#circle').click(function(e) {
    alert('Hit!');
});