JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div></div>
</div>

CSS

.wrap{
  width: 100px;
  height: 100px;
  outline:1px solid red;
}

.wrap div{
  width: 100px;
  height: 100px;
  background: green;
  opacity:0;
  transition:opacity 1s 1s linear;
}

.wrap:hover div{
  width: 100px;
  height: 100px;
  opacity:1;
  transition:opacity 1s 0s linear;
}