JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" id="sun" class="planet">
  <area shape="circle" coords="90,58,3" alt="Mercury" id="mercury" class="planet">
  <area shape="circle" coords="124,58,8" alt="Venus" id="venus" class="planet">
</map>

</body>

CSS

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #8AC007;
}

div.absolute {
    position: absolute;
    right: 20px;
    width: 200px;
    height: 120px;
    border: 3px solid #8AC007;
}

JavaScript

var planets = document.getElementsByClassName('planet');

for(var i = 0; i < planets.length; i++){
  planets[i].onclick = addTag;
}

function addTag(event){
		var tag = document.createElement('div');
    tag.innerHTML = event.target.id;
    tag.className = "tag";
  	document.body.append(tag);
    
    tag.style["position"] = "absolute";
    tag.style["background-color"] = "white";
    tag.style["border"] = "solid black 1px";
    tag.style["left"] = event.clientX + "px";
    tag.style["top"] = event.clientY + "px";

}