JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span>Das hier ist ein langer Text, in dem auch ab und zu <i>kursiv</i> geschrieben wird. <i>Hier</i> und <i>dort</i> auch mal mit vielen kursiven Wörtern hintereinander.</span>
    <span>Dann kommt noch ein weiter Absatz der auch vielleicht <i>kursive</i> Elements hat.</span>
    <span>Oder auch mal ohne kursives Zeug.</span>
</div>
<div id="output"></div>

CSS

body {
    width: 100%;
}
div {
    width: 90%;
    margin: 0 auto;
    background-color: #CCC;
    border: 2px solid #888;
}
span {
    display: block;
    margin-left: 50%;
    transform: translateX(-50%);
}
i {
    font-weight: bolder;
}
div#output {
    background-color: #FFF;
    border: 2px solid #333;
}

JavaScript

var WordUnderCursor = {
                  getFullWord : function(event) {
                      var i, begin, end, range, textNode, offset;
                      // Internet Explorer
                      if (document.body.createTextRange)
                        {
                        try {
                          range = document.body.createTextRange();
                          range.moveToPoint(event.clientX, event.clientY);
                          range.select();
                          range = WordUnderCursor.getTextRangeBoundaryPosition(range, true);
                          textNode = range.node;
                          offset = range.offset;
                        } catch (e) {
                          return ""; // Sigh, IE
                        }
                        }
                      // Firefox, Safari
                       else if (document.caretPositionFromPoint)
                        {
                        range = document.caretPositionFromPoint(event.clientX, event.clientY);
                        textNode = range.offsetNode;
                        offset = range.offset;
                        }
                      // Chrome
                       else if (document.caretRangeFromPoint)
                        {
                        range = document.caretRangeFromPoint(event.clientX, event.clientY);
                        textNode = range.startContainer;
                        offset = range.startOffset;
                        }
                      if (!textNode || textNode.nodeType !== Node.TEXT_NODE)
                        return "";
                      var data = textNode.textContent;
                      if (offset >= data.length)
                        offset = data.length - 1;
                      if (WordUnderCursor.isW(data[offset]))
                        return "";
                      i = begin = end = offset;
                      while (i > 0 && !WordUnderCursor.isW(data[i - 1]))
    ...