JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dataCard"><div class="ripple"></div></div>
<div class="dataCard"><div class="ripple"></div></div>

CSS

.dataCard{
    height:200px;
    width:200px;
    margin-bottom:20px;
    background:blue;
    position:relative;
}
.dataCard + .dataCard{margin-left:100px;}
.ripple{
    height:25px;
    width:25px;
    position:absolute;
    background:red;
    display:none;
}

JavaScript

$('.dataCard').on('mousedown touchstart', function(event){
    var clickX = (event.clientX || event.originalEvent.clientX),
        clickY = (event.clientY || event.originalEvent.clientY);
    
    $(this).children('.ripple').each(function(){
        $(this)
            .show()
            .css({
                left: clickX - this.offsetParent.offsetLeft,
                top: clickY - this.offsetParent.offsetTop
            });
    });
});