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

$(document).ready(function() {
    
    $("#red").click(function () {
        $(this).addClass("active");
        $("#blue").removeClass("active");
    });
    
    $("#blue").click(function () {
        $(this).addClass("active");
        $("#red").removeClass("active");
    });
    
   $("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;
		}
	});
});