JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div class="details">
    <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  </a>
<div class="prodimg"></div>
</div>
<div class="details">
    <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </a>
<div class="prodimg"></div>
</div>
    <div class="details">
    <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  </a>
<div class="prodimg"></div>
</div>
</div>

CSS

#wrapper {
 width: 280px;
 padding-top: 130px;
 position: absolute;
 left:50%;
 margin-left: -141px;
 font-size: 10px;
 font-family: 'cmu_serifroman';
}

.details {
 text-align:center;
 width:60px;
 display:inline-block;
 margin-right:20px;
 cursor:pointer;
}

.prodimg {
 visibility:hidden;
 position:fixed;
 z-index:-1;
 background-color:blue;
 width:50px;
 height:50px;
    
}

JavaScript

$(document).ready(function() {
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
 mouseX = e.clientX; 
 mouseY = e.clientY;
});  
$(".details").hover(
  function () {
$(this).children(".prodimg").css("visibility","visible");
$(document).bind('mousemove', function(e){
    $(".details").children(".prodimg").css({'top':mouseY,'left':mouseX});
});
 },
  function () {
    $(".prodimg").css("visibility","hidden");

   });
});