JSFiddle - React, Tailwind, and code Playground

by kougiland

CSS

body{
    position:fixed;
    width:100%;
    height:100%;
}
.clickObj {
    width:20px;
    height:20px;
    position:absolute;
    border: 2px solid #30a3ec;
    box-shadow: 0 0 5px #a0eaff;
    border-radius: 100%;
    margin-top: -20px;
    margin-left: -20px;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    animation: pulse .3s linear  forwards;
    -webkit-animation: pulse .3s linear forwards;
    -moz-animation: pulse .3s linear  forwards;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.3);
        opacity: 0.5;
    }
    
    80% {
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
    
    100% {
        -webkit-transform: scale(2.5);
        opacity: 0;
    }    
}
@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(0.3);
        opacity: 0.5;
    }
    
    80% {
        -moz-transform: scale(1.5);
        opacity: 0;
    }
    
    100% {
        -moz-transform: scale(2.5);
        opacity: 0;
    }    
}
@keyframes pulse {
    0% {
        transform: scale(0.3);
        opacity: 0.5;
    }
    
    80% {
        transform: scale(1.5);
        opacity: 0;
    }
    
    100% {
        transform: scale(2.5);
        opacity: 0;
    }    
}

JavaScript

$("body").click( function(e){
    var clickObj = $("<div class='clickObj'><div></div></div>"),
    posX = $(this).position().left,
    posY = $(this).position().top;
    $(this).append(clickObj);
    clickObj.css({left:(e.pageX - posX),top:(e.pageY - posY)});
    setTimeout(function() { clickObj.remove(); }, 1000);
});