JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dot" class="dot"></div><!-- the character -->

CSS

.dot {
    background-color:red;
    width: 10px;
    height: 10px;
    position: absolute;
    top:0;
    left:0;
}

JavaScript

$(document).keydown(function (e) {
    if (e == 37) {
        $("#dot").animate({
            left: "-=5"
        }, 5);
    } else if (e == 38) {
        $("#dot").animate({
            top: "-=5"
        }, 5);
    } else if (e == 39) {
        $("#dot").animate({
            left: "+=5"
        }, 5);
    } else if (e == 40) {
        $("#dot").animate({
            top: "+=5"
        }, 5);
    }
});