JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>

CSS

div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 100px;
    top: 100px;
}

JavaScript

function move(event) {
    var k = event.keyCode,
        chrId = document.getElementById('test'),
        chr = {
            updown: function () {
                var y = parseInt(getComputedStyle(chrId).top);
                if (k == 38) {
                    --y;
                } else if (k == 40) {
                    ++y;
                }
                
                return y;
            },

            leftright: function () {
                var x = parseInt(getComputedStyle(chrId).left);
                if (k == 37) {
                    --x;
                } else if (k == 39) {
                    ++x;
                }
                
                return x;
            }
        };

    chrId.style.top = (chr.updown()) + "px";
    chrId.style.left = (chr.leftright()) + "px";
}

document.addEventListener('keydown', move);