JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li id="hover">
            THIS IS THE ITEM TO HOVER
            <div class="hover-el"></div>
        </li>
    </ul>
</div>

CSS

ul { margin:50px; }
ul li { width:100px; height:100px; background:red; }

.hover-el { width:150px; height:150px; background:blue; position:absolute; top:0; left:0; display:none; }

JavaScript

var con = $('.hover-el'),
    item = $('#hover'),
    pos = item.offset(),
    x = pos.left,
    y = pos.top;

$('#hover').bind({
    mouseenter: function() {
        con.show().css({'top': x - 25, 'left': y - 25});
    },
    mouseleave: function() {
        con.hide();
    }
});