JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block1">
  <div id="in_block_1">test</div>
</div>
<br />
<div id="block2">
  <div id="in_block_2">ok</div>
</div>

CSS

#block1 {
    pozition:relative;
    z-index-1;
    width: 200px;
    height: 100px;
    background-color:blue; 
    color:#000;
    cursor:pointer;
  }
  #block2 {
    pozition:relative;
    z-index-1;
    width: 200px;
    height: 100px;
    background-color:green; 
    color:#000;
    cursor:pointer;
  }
 #in_block_1, #in_block_2 {
    pozition:absolute;
    z-index-2;
    display:none;
    width: 200px;
    height: 100px;
    background-color: #000;
    color:#fff
  }

JavaScript

$(function () {
  $('div[id^="block"]')
    .mouseover(function(e) {
       $(this).children().stop().fadeIn(300);
  }).mouseout(function(e) {
       $(this).children().stop().fadeOut(200);
  });
});