JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div id="frame">
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>

CSS

.box
{
    border:1px solid black;
    margin-bottom: -25px;
    width: 200px;
    height: 60px;
    padding: 2px;
    zoom: 1;
}
#frame {
    position: relative;
    border:1px dotted #ddd;
    height: 188px;
    width: 266px;

}

JavaScript

$(".box").each(function(i) {
        r = Raphael(this, 200, 60);
        c = r.circle(100, 30, 30)
        c.attr("fill", "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")");
        c.attr("stroke", "#fff");
        this.circle = c;
        $(this).css('top', $(this).position().top);
        $(this).css('left', i * 20);

    });

    $(".box").each(function(i) {
        $(this).css('position', 'absolute');
    });
    
    $('#frame').mouseenter(function() {
        $(".box").css("border-color", "black");
    });


    var mouseoutHandler = function() {
        $(this).css("border-color", "black");
    };

    $(".box").mouseover(function() {
        $(this).css("border-color", "red");
        //this.circle.toFront();
        this.parentNode.appendChild(this);
        
        $(this).siblings().each(function() {
            $(this).css("border-color", "black");
        });

        // these aren't working:
        $(this).unbind('mouseout');
        $(this).mouseout(mouseoutHandler);
    });