JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li>Первый пункт</li>
    <li>Второй пункт точка</li>
    <li>Третьий пункт точка и запятая</li>
    <li>Четвёртый пункт</li>
</ul>
<div id="d1"></div>

CSS

ul {
    border:2px solid red;
    background:#CC9;
    width:650px;
}
li {
    display:inline-block;
    border:2px solid blue;
}
#d1 {
    position:absolute;
    background:red;
    left:15px;
    top:17px;
    width:135px;
    height:20px;
    opacity:0.5;
}

JavaScript

(function () {

    var rect, rect1; // rectangles
    var shadow; // shadow div
    var bpos; // begin position
    var epos; // end position
    var width, shadowWidth;
    var step; // animation step 1..50
    var timer = null;

    function animateRect() {
        step++;
        if (step > 50) {
            clearInterval(timer);
            timer = null;
            return;
        }
        var t = bpos.t + Math.round((epos.t - bpos.t) * step / 50);
        var l = bpos.l + Math.round((epos.l - bpos.l) * step / 50);
        var w = shadowWidth + Math.round((width - shadowWidth) * step / 50);
        shadow.style.top = t + "px";
        shadow.style.left = l + "px";
        shadow.style.width = w + "px";
        console.log(t, l, w, bpos, epos, step, epos.t - bpos.t);
    }

    function highlightMenu(e) {
        e = e || window.event; // for IE8,7
        var item = e.target || e.srcElement; // for IE8,7
        if (timer) {
            clearInterval(timer);
        }
        step = 0;
        rect = item.getBoundingClientRect();
        width = item.offsetWidth;
        epos = {
            t: rect.top,
            l: rect.left
        };

        rect1 = shadow.getBoundingClientRect();
        shadowWidth = shadow.offsetWidth;
        bpos = {
            t: rect1.top,
            l: rect1.left
        };
        timer = setInterval(animateRect, 5);
    }



    function init() {
        var menu = document.getElementById('menu');
        var items = menu.getElementsByTagName('li');
        for (var i = 0; i < items.length; i++) {
            items[i].onmouseenter = highlightMenu;
        }
        shadow = document.getElementById('d1');
        shadow.style.width = items[0].offsetWidth + 'px';
        shadow.style.top = items[0].getBoundingClientRect().top + 'px';
        shadow.style.left = items[0].getBoundingClientRect().left + 'px';
    }

    if (window.addEventListener) {
        window.addEventListener('load', init, false);
    } else if...