JSFiddle - React, Tailwind, and code Playground

by Itay

HTML

<div id="outer">
    <div id="inner"></div>
</div>

CSS

#outer {
    width: 200px;
    height: 200px;
    background:red;
}
#inner {
    width: 100px;
    height: 100px;
    background:yellow;
    opacity: 0;
    transition: opacity 0.5s ease;
}
#outer:hover #inner {
    opacity: 1;
}