JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
::highlight(example-highlight) {
    background-color: rgba(0, 255, 255, 0.5);
}
::highlight(example-highlight-2) {
    background-color: rgba(255, 255, 0, 0.5);
}
.dialog {
  width: 200px;
  height: 30px;
  background: rgba(255,255,255,0.8);
  position: absolute;
  border: 1px solid black;
  top: 10px;
  left: 100px;
}
</style>
</head>
<body>
<div class="dialog"></div>
<p id=highlight>This is some example highlighted text to show.</p>
<div id=log></div>
  
<script id="rendered-js" >
  const textNode = document.querySelector("#highlight");
  let range1 = new Range();
  range1.setStart(textNode.childNodes[0], 2);
  range1.setEnd(textNode.childNodes[0], 30);
  let range2 = new Range();
  range2.setStart(textNode.childNodes[0], 5);
  range2.setEnd(textNode.childNodes[0], 27);
  let highlight1 = new Highlight(range1);
  CSS.highlights.set("example-highlight", highlight1);
  let highlight2 = new Highlight(range2);
  CSS.highlights.set("example-highlight-2", highlight2);

function update(ev) {
  const highlights = CSS.highlights.highlightsFromPoint(ev.pageX, ev.pageY);
  document.querySelector('#log').textContent = `Highlights clicked: ${highlights.length}`;
}
document.addEventListener('click', update);
</script>
</body>
</html>