JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#">Hover here</a>
<div>Show me now!</div>
CSS
div {
width: 100px;
height: 100px;
background: red;
margin: 20px;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
-ms-transition: opacity 300ms;
-o-transition: opacity 300ms;
transition: opacity 300ms;
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
a {
font-size: 16px;
font-weight: bold;
}
a:hover + div {
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
}