JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first">WHAT

  <div id="on-hover">mousey

  </div>

</div>

CSS

#first {
    height:300px;
    width:300px;
    background:#f00;
}
#on-hover {
    height:100px;
    width:200px;
    background:#00f;
     opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    opacity:0;
}
#on-hover:hover {
      opacity: 1;
      }