JSFiddle - React, Tailwind, and code Playground

HTML

<div class="playing-field">
    <img id="picture" src="assets/images/image.jpg">
    <svg class="speechbubbles" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">
</div>

JavaScript

$(".playing-field").on("click", "#picture", function(e) {
  var offset = $("#picture").offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
    alert( 'x :'relativeX + ' y :' + relativeY);
    
});