JSFiddle - React, Tailwind, and code Playground

HTML

<div id='outer'>
    <div id='inner'>
        Now you see me ! 
    </div>
</div>

<div id='outer1'>
    <div id='inner1'>
        Now you see me ! 
    </div>
</div>

CSS

#outer{
    background-color:#ff0;
    width:100px;
    height:50px;
}
#inner{
    visibility:hidden;
    transition:visibility 1000ms;
}
#outer:hover #inner{
    visibility:visible;
}

#outer1{
    background-color:#f00;
    width:100px;
    height:50px;
}
#inner1{
    opacity:0;
    transition:opacity 1000ms;
}
#outer1:hover #inner1{
    opacity:1;
}