JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <img src="https://placekitten.com/g/50/50" alt="kitty" id="sprite" width="70px" style="position: absolute; left: 0px; top: 0px;" />
</div>

CSS

#sprite {
    position: absolute;
}

JavaScript

var dx = 5;
var dy = 5;

var xPos = 0;
var yPos = 0;

function position() {
    kitty = document.getElementById("sprite");
    kitty.style.left = xPos + "px";
    kitty.style.top = yPos + "px";
    setTimeout(position, 10);
}

function move(event) {
    var keyPressed = String.fromCharCode(event.keyCode);

    if (keyPressed == "W") {
        xPos -= dx;
    } else if (keyPressed == "D") {
        xPos += dx;
    } else if (keyPressed == "S") {
        yPos -= dy;
    } else if (keyPressed == "A") {
        xPos += dy;
    }
}

document.addEventListener("keydown", move)
position();