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(){
        var ripple = $(this).show(),
            container = ripple.offsetParent(),
            offset = container.offset(),
            correctX = clickX - offset.left,
            correctY = clickY - offset.top;
        
        ripple.css({ left: correctX, top: correctY});
    });
});