JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

$(document).ready(function() {
  $(document).on('keydown', function(e) {
    var kc = e.keyCode;
    var hero = $("#log");
    e.preventDefault();

    if (kc === 37) hero.css("left", (hero.position().left - 1) + "px");
    if (kc === 38) hero.css("top", (hero.position().top - 1) + "px");
    if (kc === 39) hero.css("left", (hero.position().left + 1) + "px");
    if (kc === 40) hero.css("top", (hero.position().top + 1) + "px");
  });
});