JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<image src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1wcDFx4CQFwezwAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAAAMElEQVR42u3SsQ0AIBDDwJj9dzYbvJCgoIjr6KqgZgpQZdqsPKjIzwhJvEZ6tiIHbZYxDxncg4XDAAAAAElFTkSuQmCC'>

<div id="xxxx">&nbsp;</div>
<div id="yyyy">&nbsp;</div>

CSS

#back{
    background:yellow;
    width:400px;
    height:400px;
}

#xxxx {
    background:gray;
    width:200px;
    height:200px;
    top: 60px;
    left: 60px;
    position: absolute;
     cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1wcDFx4CQFwezwAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAAAMElEQVR42u3SsQ0AIBDDwJj9dzYbvJCgoIjr6KqgZgpQZdqsPKjIzwhJvEZ6tiIHbZYxDxncg4XDAAAAAElFTkSuQmCC) 8 8, auto;
}


#yyyy {
    background:yellow;
    width:200px;
    height:200px;
    top: 60px;
    left: 260px;
    position: absolute;
    /*
     cursor:url(http://www.metalocator.com/wp-content/uploads/2014/01/red_marker.png) 15 43, auto;
     */
     cursor:url(http://files.softicons.com/download/toolbar-icons/black-wireframe-toolbar-icons-by-gentleface/png/16/cursor_arrow.png),auto;
     
     
}

JavaScript

var t = document.getElementById("xxxx");
t.onclick = function(e)
{
   console.log(e.offsetX+", "+e.offsetY);
}

var tt = document.getElementById("yyyy");
tt.onclick = function(e)
{
   console.log(e.offsetX+", "+e.offsetY);
}