JSFiddle - React, Tailwind, and code Playground

by Michael Keller

HTML

<div id="circle"></div>

CSS

#circle{
    position:absolute;
    top:50px;
    left:50px;
 width:10px;
 height:10px;    
 background-color:red;
    border-radius:50%;
    -webkit-transition: width .4s linear, height .4s linear, opacity .4s linear, top .4s linear, left .4s linear;
}
#circle.expanded{
   height:80px;
   width:80px;
   top:15px;
   left:15px; 
   opacity:0;    
}

JavaScript

$('#circle').click(function(){
   $(this).addClass('expanded');
 });