JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
<tr>
  <td></td>
  <td id="up"></td>
  <td></td>
</tr>
<tr>
  <td id="left"></td>
  <td id="center"></td>
  <td id="right"></td>
</tr>
<tr>
  <td></td>
  <td id="down"></td>
  <td></td>
</tr>
</table>

<a id="ball">●</a>

CSS

td {
    height:20px;
    width:20px;
}

#center {
    background-color:red;
}

#ball {
    position:absolute;
    font-size:3em;
}

JavaScript

var x = 0;
var y = 0;
$(document).keydown(function(e){
    while (e.keyCode == 37) { 
       $("#left").css( "background-color", "red" );
       x = x-1;
       $("#ball").css( "margin-left", x*10 );
       return false;
    }
});
$(document).keyup(function(e){
    while (e.keyCode == 37) { 
       $("#left").css( "background-color", "#fff" );
       return false;
    }
});
$(document).keydown(function(e){
    while (e.keyCode == 38) { 
       $("#up").css( "background-color", "red" );
       y = y-1;
       $("#ball").css( "margin-top", y*10 );
       return false;
    }
});
$(document).keyup(function(e){
    while (e.keyCode == 38) { 
       $("#up").css( "background-color", "#fff" );
       return false;
    }
});
$(document).keydown(function(e){
    while (e.keyCode == 39) { 
       $("#right").css( "background-color", "red" );
       x = x+1;
       $("#ball").css( "margin-left", x*10 );
       return false;
    }
});
$(document).keyup(function(e){
    while (e.keyCode == 39) { 
       $("#right").css( "background-color", "#fff" );
       return false;
    }
});
$(document).keydown(function(e){
    while (e.keyCode == 40) { 
       $("#down").css( "background-color", "red" );
       y = y+1;
       $("#ball").css( "margin-top", y*10 );
       return false;
    }
});
$(document).keyup(function(e){
    while (e.keyCode == 40) { 
       $("#down").css( "background-color", "#fff" );
       return false;
    }
});