JSFiddle - React, Tailwind, and code Playground

by Niffler

HTML

<div id="ballGame">
    <center>
        <div id="block"></div>
        <button id="ball"></button>
    </center>
</div>

CSS

#ballGame {
    height:350px;
    width:350px;
    border-style:solid; 
    border-width:5px;
    overflow:hidden;
}
#ball {
    background:#98bf21;
    height:50px;
    width:50px;
    position:relative;
    border-radius:100px;
    outline:0;
}
#block {
    height:300px;
}

JavaScript

$.fx.speeds._default = 3000;
$("#ball").animate({bottom:'360px'});
$("#ball").animate({bottom:'0px'}, function() {
    $('#block').text("Game Over");
});

$('#ball').click(function() {
    $('#ball').stop(true);
    $("#ball").animate({bottom:'360px'});
    $("#ball").animate({bottom:'0px'}, function() {
        $('#block').text("Game Over");
    });
});