JSFiddle - React, Tailwind, and code Playground

HTML

<p class="sentence">
  <span class="word" index="0">There </span><span class="word" index="1">is </span><span class="word" index="2">a </span><span class="word" index="3">big, </span><span class="word" index="4">wonderful </span><span class="word" index="5">world.</span>
</p>

<p style="color: grey; margin-top: 10em">
  Don't forget to expand the console (below) to see output.
</p>

CSS

.word {
  border: 1px solid green;
  font-size: 2.5em;
  
  /* margin: 3px; */
}

JavaScript

$('.word').click(function() {
  let word_index = $(this).attr('index');
  
	let selection  = window.getSelection();
  let char_index = selection.focusOffset;

	console.log('Clicked to set a new cursor @');
  console.log('Word index = ' + word_index.toString() + 
  				 ' / char index = ' + char_index.toString() );
});