JSFiddle - React, Tailwind, and code Playground

HTML

<form action='/' method='post'>
	<textarea name='content' id='post_content' placeholder='Type in your content' onkeyup="stextAreaResize(this)" rows="15" cols="55"></textarea>
	<!-- <div id='post_content' contenteditable='true'>fywusnfw nsu</div> -->
</form>

JavaScript

function getSelected(){
  var t = '';
  if(window.getSelection){
    t = window.getSelection();
  }else if(document.getSelection){
    t = document.getSelection();
  }else if(document.selection){
    t = document.selection.createRange().text;
  }
  return t;//.toString()
}

$('#post_content').on('select',function(){
    var range = getSelected().getRangeAt(0);
    range.collapse(false);
    var dummy = document.createElement("span");
    //dummy.innerHTML = "bar";
    range.insertNode(dummy);
    var rect = dummy.getBoundingClientRect();
    var x = rect.left, y = rect.top;
    dummy.parentNode.removeChild(dummy);
    alert(x + "/" + y);
});