JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

CSS

ul {
    display: box;
      display: -webkit-box;
      display: -moz-box;
      box-orient: horizontal;
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
}

li {
    height: 40px;
    width: 60px;
    background: lightblue;
    display: block;
}

JavaScript

(function ($) {
    var t;
    $('ul li').hover(function() {
        var that = this;
        window.clearTimeout(t);
        t = window.setTimeout(function () {
            $(that).animate({height: 60, opacity: .5}, 'slow').animate({height: 40, opacity: 1});
          }, 2500);
    });
    
    $('ul').mouseleave(function() {
        window.clearTimeout(t);
    });
}(jQuery));