JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child">me</div>
</div>

CSS

.parent{
  width:90px;
  height:90px;
  background:pink;
  position:relative;
}
.child{
  width:30px;
  height:30px;
  background:gray;
  position:absolute;
}

JavaScript

/*$(document).keydown(function (event) {
	alert(event.keyCode + 'keydown');
});
$(document).keyup(function (event) {
	alert('keyoup' + event.keyCode);
});
$(document).bind('keypress', function (evt) {
	alert(evt.keyCode + ' keypress');
});*/
$(document).keydown(event => {
	if (event.keyCode === 37) {
  	to_left();
    console.log(event.keyCode + 'keydowm');
  } else if ( event.keyCode === 39) {
  	to_right();
    console.log(event.keyCode + 'keydowm');
  } else if (event.keyCode === 38) {
  	to_up();
    console.log(event.keyCode + 'keydowm');
  } else if (event.keyCode === 40) {
  	to_down();
    console.log(event.keyCode + 'keydowm');
  }
});
function to_left() {
	$('.child').css({'left':'-=30'});
}
function to_right() {
	$('.child').css({'left':'+=30'});
}
function to_up() {
	$('.child').css({'top':'-=30'});
}
function to_down() {
	$('.child').css({'top':'+=30'});
}