JSFiddle - React, Tailwind, and code Playground

HTML

<p id="p">
Hover me!
</p>
<div>

</div>

CSS

div {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
  opacity:0;
}

JavaScript

$(document).on('click', '#p', function(){
   $('div').css({"display":"block"})
   $('div').animate({opacity :1}, 1000);   
 });