JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sel">A</div>
<div>B</div>
<div>C</div>

CSS

div{
  margin: 10px;
  padding: 5px;
  height: 20px;
  width: 20px;
  background: red; 
  text-align:center;
  cursor: pointer;
  border: 4px solid #ffffff;
}

.sel {
  border: 4px solid #0000ff;  
}

JavaScript

$('div').hover(function(){
  if (!$(this).hasClass('sel')) {
    $(this).stop().animate({borderColor:'#0000ff'}, 2000);      
  }
},function(){
  if (!$(this).hasClass('sel')) {
    $(this).stop().animate({borderColor:'#ffffff'}, 2000);
  }
}).click(function(e){
  $('.sel').not(this).stop().animate({borderColor:'#ffffff'}, 2000).removeClass('sel');
  $(this).addClass('sel');
});