JSFiddle - React, Tailwind, and code Playground

by maharajan a

HTML

<div class="circule">

</div>

CSS

.circule
{
  width:104px;
  height:140px;
  border-radius:80% 80% 80% 80%;
cursor:pointer;
-webkit-transition:all .1s ease;
transition:all .1s ease;
background:red;
position:absolute;
}
.circule:after
{
    color: rgb(255, 0, 0);
    position: absolute;
    bottom: -12px;
    left: 42px;
    content: "â–˛";
    font-size: 1em;
}
.circule.burst
{
  animation:burst .1s linear 1s 1;
}

@keyframes burst
{
  0%{
    transform:scale(1)
  opacity:1
  };
  90{
   transform:scale(1.5);
   opacity:.4
  }
  100%{
    transform:scale(1.7);
    opacity:0
  }
}

JavaScript

$(function() {

$('.circule').on('click',function() {
$(this).addClass('burst').toggle("explode", {
        pieces: 80
    }, 250);
})

});