JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cross" id="cross-y"></div>
<div class="cross" id="cross-x"></div>

CSS

div.cross {
    position: absolute;
    z-index: 999;
    background-color:black;
}
div#cross-x {
    left: 20px;
    top: 25px;
    width: 11px;
    height: 1px;
}
div#cross-y {
    left: 25px;
    top: 20px;
    width: 1px;
    height: 11px;
}
div.active {
    background-color: blue;
}

JavaScript

var mx = 0, my = 0, mover = null;
var moveCross = function(){
    if (mx != 0 || my != 0)
        $('div[id^=cross]').addClass('active');
    else {
        $('div[id^=cross]').removeClass('active');
        clearInterval(mover);
        mover = null;
        return;
    }
    
    $('div[id^=cross]').each(function(i,e){
        if ($(this).hasClass('active')){
            var off = $(this).position();
            $(this).css({
                left: (off.left+mx)+'px',
                top: (off.top+my)+'px'
            });
        }
    });
}

$(document).keydown(function(e){
    window.console.log(e.keyCode);
    switch (e.keyCode){
        case 38: // up
            my = -1;
            break;
        case 40: // down
            my = 1;
            break;
        case 37: // left
            mx = -1;
            break;
        case 39: // right
            mx = 1;
            break;
    }
    if (mover == null)
        mover = setInterval(moveCross,10);
    e.preventDefault();
}).keyup(function(e){
    switch (e.keyCode){
        case 38: // up
        case 40: // down
            my = 0;
            break;
        case 37: // left
        case 39: // right
            mx = 0;
            break;
    }
    e.preventDefault();
});