JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<div class="foo">foo</div>
<div class="hiddenFoo">Hola soy foo</div>


<br><br><br>
    <div class="foo">foo</div>
<div class="hiddenFoo">Hola soy foo</div>
    
    
<br><br><br>
    <div class="foo">foo</div>
<div class="hiddenFoo">Hola soy foo</div>

CSS

.foo{background: #999; padding: 10px; width: 100px;}
.hiddenFoo{background: #FC0; padding: 20px; height: 50px; width: 200px; float:left;
position:absolute; border: 1px solid red;}

JavaScript

$(document).ready(function()
{
   $('.hiddenFoo').hide();
   //
   $('.foo').mouseover(function()
   {
      $(this).next($('.hiddenFoo')).fadeIn(300);
   });
   $('.foo').mouseout(function()
   {
      $(this).next($('.hiddenFoo')).fadeOut(300);
   });
    
});