JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img src="http://www.hostgeek.net.br/wp-content/uploads/2016/05/Homer-simpson-homer-live.jpg" >
</div>

CSS

div{
  position: relative;
}

img{
  cursor: pointer;
  width: 300px;
}
#tagit{
  position: absolute;
}

JavaScript

$('img').click(function(e){
 	$('#tagit').remove();
       valueX = e.pageX;
       valueY = e.pageY;
       
      $(this).parent().append('<div id="tagit"><div class="box"></div><div class="name"><input type="text" name="txtname" class="w3-input" id="tagname" placeholder="Comente..." /><input type="button" name="w3-btn" value="Save" id="btnsave" /><input type="button" name="btncancel" value="Cancel" id="btncancel" /></div></div>');
      $('#tagit').css({top:valueY,left:valueX});
       $('#tagname').focus(); //puts the cursor inside text-field

});