JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menuBar">
</div>

CSS

body {
	margin:0;padding:0;background-color:black;width:100%;position:relative;
}
.menuBar {
	width:100px;
	height:100px;
	background-color:red;
	position:absolute;
}

JavaScript

document.body.style.height = window.innerHeight + "px";
var menu = document.querySelector(".menuBar");
menu.style.top = "100px";
menu.style.left = "300px";

var events = {};

window.addEventListener("keydown", function(e) {
	events[e.keyCode] = true;
	move();
});
window.addEventListener("keyup", function(e) {
	events[e.keyCode] = false;
});

function move() {
	if(events[87]) menu.style.top = parseInt(menu.style.top ,10) - 1 + "px";
	if(events[83]) menu.style.top = parseInt(menu.style.top ,10) + 1 + "px";
	if(events[65]) menu.style.left = parseInt(menu.style.left ,10) - 1 + "px";
	if(events[68]) menu.style.left = parseInt(menu.style.left ,10) + 1 + "px";
	if(events[87] && events[68]) {
		menu.style.top = parseInt(menu.style.top ,10) - 1 + "px";
		menu.style.left = parseInt(menu.style.left ,10) + 1 + "px";
	}
	console.log(events);
}