JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="log">
  <p>---</p>
</div>

CSS

#log {
   position: absolute;
   width: 50px;
   height: 50px;
   border: 2px solid black;
   background-color: black;
   color: white;
   font-size: 20px;
   left: 20px;
 }
 
 p {
   text-align: center;
   margin: 0;
 }

JavaScript

$(document).ready(function() {
  var hero = $("#log");
  var speed = 1;
  var direction = {
    left: false,
    up: false,
    right: false,
    down: false
  };

  $(document).on('keydown', function(e) {
    var kc = e.keyCode;
    e.preventDefault();

    if (kc === 37) direction.left = true;
    if (kc === 38) direction.up = true;
    if (kc === 39) direction.right = true;
    if (kc === 40) direction.down = true;
  });

  $(document).on('keyup', function(e) {
    var kc = e.keyCode;
    e.preventDefault();

    if (kc === 37) direction.left = false;
    if (kc === 38) direction.up = false;
    if (kc === 39) direction.right = false;
    if (kc === 40) direction.down = false;
  });

  function move() {
    if (direction.left) hero.css("left", (hero.position().left - speed) + "px");
    if (direction.up) hero.css("top", (hero.position().top - speed) + "px");
    if (direction.right) hero.css("left", (hero.position().left + speed) + "px");
    if (direction.down) hero.css("top", (hero.position().top + speed) + "px");
  }

  setInterval(move, 1);
});