JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span></span>
</div>

CSS

div { height:100px;
      width:100px;
      background:#00ffba;
      position:relative; }

span { width:20px;
       height:20px;
       position:absolute;
       top:0;
       right:0;
       background:#ff00c0;
       
       opacity:0; /* For cool browsers */
    
       -webkit-transition:opacity 2s ease-in;
       -moz-transition:opacity 2s ease-in;
       -o-transition:opacity 2s ease-in;
       -ms-transition:opacity 2s ease-in;
       transition:opacity 2s ease-in; }

div:hover > span {
    opacity:1; /* For cool browsers */