JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box unselected"></div>
</div>
<div class="container">
  <div class="box unselected"></div>
</div>
<div class="container">
  <div class="box unselected"></div>
</div>
<div class="container">
  <div class="box unselected"></div>
</div>
<div class="container">
  <div class="box unselected"></div>
</div>

CSS

.box {
  background-color: green;
  width: 100px;
  height: 30px;
}
.container {
  height: 50px;
  margin: 10px;
}

JavaScript

$(".box").mouseenter(function() {
  $(this).stop(true, true).animate({
    height: '+=10px', width: '+=10px'
  });
  $(this).removeClass('unselected');
  $('.unselected').stop(true,true).animate({
    height: '-=10px', width: '-=10px'
  });
}).mouseleave(function() {
  $(this).stop(true, true).animate({
    height: '-=10px', width: '-=10px'
  })
  $('.unselected').stop(true,true).animate({
    height: '+=10px', width: '+=10px'
  });
  $(this).addClass('unselected');
});

$(".box").click(function() {
  $(this).toggle(1000);
});