JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>

CSS

#box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript

function jump(oy, x, jh, jw, speed, id) {
	var ox = x;
	var inter = setInterval(function () {
	    y = jh*Math.sin(x*Math.PI/jw) + oy;
	    if (x >= (jw + ox) - 50) clearInterval(inter);

	    x+=3;

	    id.css({
	        'bottom': y + 'px',
	        'left': x + 'px'
	    });
	}, speed);
}

function move(id) {
	var id = $("#" + id);
	var y = id.position();
	var y = y.top + 28;
	var y = $(window).height() - y;
	jump(y, id.position().left, 100, 150, 30, id);
}

$("#box").click(function() {
    move('box');
});