JSFiddle - React, Tailwind, and code Playground

HTML

<div id="character"></div>
<div id="ground"></div>

CSS

#character {
    position:absolute;
    width:40px;
    height:40px;
    left:50px;
    background-color: #F00;
}

#ground {
    position:absolute;
    width : 300px;
    height : 60px;
    left :0px;
    background-color : #A66;
}

JavaScript

var character = document.getElementById("character");
var ground    = document.getElementById("ground");

//We could use getComputedStyle to get the style props,
//but I'm lazy
character.style.top = "10px";
character.style.height = "40px";
ground.style.top = "250px";

//For every 33ms (about 30fps)
setInterval(function(){
    
    //Get the height and position of the player
    var charTop    = parseInt(character.style.top),
        charHeight = parseInt(character.style.height);
    
    //and the top of the ground
    var groundTop = parseInt(ground.style.top);
    
    //linear gravity? Why now?
    charTop += 5;
    
    //If the character's bottom is hitting the ground,
    //Stop moving
    if(charTop + charHeight > groundTop) {
        charTop = groundTop - charHeight;    
    }
    
    //Set the character's final position    
    character.style.top = charTop + "px";
},33);