JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#test {
  position: relative;
  width: 30px;
  border: 1px solid blue;
  height: 10px;
  top: 0px;
  left: 0px;
}

JavaScript

document.addEventListener("keydown", keyBoardInput);
var left = 0;
var top = 0;

function moveUp() {
  console.log('moveUp');
  top -= 20;
  document.getElementById("test").style.top = top + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveDown() {
  console.log('moveDown');
  top += 20;
  document.getElementById("test").style.top = top + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveLeft() {
  console.log('moveLeft');
  left -= 20;
  document.getElementById("test").style.left = left + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function moveRight() {
  console.log('moveRight');
  left += 20;
  document.getElementById("test").style.left = left + "px";
  document.getElementById("test").style.transition = "all 1s";
};

function keyBoardInput() {
  var i = event.keyCode;

  if (i == 38) {
    moveUp()
  };

  if (i == 40) {
    moveDown()
  };

  if (i == 37) {
    moveLeft()
  };

  if (i == 39) {
    moveRight()
  };
};