JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hero">H</div>

CSS

div { border: 1px solid red; width: 20px; height: 20px; position: absolute; text-align: center; }

div#log { position: fixed: left: 0px; width: 200px; bottom: 0px; }

JavaScript

var keys = {};

$(document).keydown(function(e) {
    keys[e.which] = true;
    moveHero();
});

$(document).keyup(function(e) {
    delete keys[e.which];
});

function moveHero() {

    var moveProps = {};
    
    for (key in keys) {        
        if (key == "37") {
            moveProps['left'] = '-=30px';
        }

        if (key == "39") {
            moveProps['left'] = '+=30px';
        }

        if (key == "38") {
            moveProps['top'] = '-=30px';
        }

        if (key == "40") {
            moveProps['top'] = '+=30px';
        }            
    }

    $("#hero").stop(true).animate(moveProps);
}