JSFiddle - React, Tailwind, and code Playground

HTML

<title>Test</title>
    </head>
    <body>
    <div id="blue"></div>
    <div id="red"></div>
</body>
</html>

CSS

div {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 5px solid gray;
    margin: 20px;
    position: relative;

}

#blue {
    background-color: blue;
    
  
}    

#red {
    background-color: red;
    
}

JavaScript

$("#red").on("click", "#red", function () {
    $("#red").addClass(".active");
    $("#blue").removeClass(".active");
});

$("#blue").on("click", "#blue", function () {
    $("#blue").addClass(".active");
    $("#red").removeClass(".active");
});


$(document).ready(function() {
    
   $("body").keydown(function(key) {
        switch(parseInt(key.which,10)) {
			// Left arrow key pressed
			case 37:
				$('.active').animate({left: "-=10px"}, 1);
				break;
			// Up Arrow Pressed
			case 38:
                case 37:
				$('.active').animate({top: "-=10px"}, 1);
				break;
			// Right Arrow Pressed
			case 39:
                case 37:
				$('.active').animate({left: "+=10px"}, 1);
				break;
			// Down Array Pressed
			case 40:
                case 37:
				$('.active').animate({top: "+=10px"}, 1);
				break;
		}
	});
});