JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
				Hover on me...
				<div id="myDiv">
					Hello!
				</div>
			</div>

CSS

#myDiv
				{
				display: none;
				opacity: 0;
				padding: 5px;
				color: #600;
				background-color: #CEC;
				-webkit-transition: 350ms display-none-transition;
				}
			
			#parent:hover>#myDiv
				{
				opacity: 1;
				display: block;
				}
				
			#parent
				{
				background-color: #000;
				color: #FFF;
				width: 500px;
				height: 500px;
				padding: 5px;
				}
				
			@-webkit-keyframes display-none-transition
				{
				0% {
					display: none; 
					opacity: 0;
					}

				1% 
					{
					display: block; 
					opacity: 0;
					}

				100% 
					{
					display: block; 
					opacity: 1;
					}
				}