JSFiddle - React, Tailwind, and code Playground

HTML

<div class="board">
		<div class="block"></div>
</div>

CSS

.board {
		width: 500px;
		height: 500px;
		background: #ccc;
		position: relative;
	}
.block { 
		background: #000;
		position: absolute;
		width: 50px; height: 50px;
		left: 0; top: 0;
}

JavaScript

$(document).ready(function() {
		var left; var top;
		$(document).keydown(function(e) {
			switch (e.keyCode) {
				case 39: // вправо
					left = $(".block").position().left;
					if (left >= 0 && left < 450)	$(".block").animate({ "left": "+=50px" }, "100" );
					break;
				case 37: // влево
					left = $(".block").position().left;
					if (left > 0 && left <= 450)	$(".block").animate({ "left": "-=50px" }, "100" );
					break;
				case 40: // вниз
					top = $(".block").position().top;
					if (top >=0 && top < 450) $(".block").animate({ "top": "+=50px" }, "100" );
					break;
				case 38: // вверх
					top = $(".block").position().top;
					if (top > 0 && top <= 450) $(".block").animate({ "top": "-=50px" }, "100" );
					break;
			}
		});	
	});