JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-core.js"></script>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna <span class="pin">d</span>


<br>
    
<br>
Click the red letter and try dragging it around.

CSS

.pin {
    height: 34px;
    width: 18px;
    overflow: show;
    background-color: red;
    cursor: pointer;
}

JavaScript

$(document).on("mousedown", '.pin', function (e) {
    //define what a pin is
    var el = document.createElement("span");
    el.className = "pin";
    el.id = "test";
    //make it contain an empty space so we can color it
    el.appendChild(document.createTextNode("d"));
    
    e.preventDefault();
    
    $(document).on("mousemove", function (e) {
        var range, textRange, x = e.clientX, y = e.clientY;
        
        //remove the old pin
        $('.pin').remove();
        
        // Try the standards-based way first
        if (document.caretPositionFromPoint) {
            var pos = document.caretPositionFromPoint(x, y);
            range = document.createRange();
            range.setStart(pos.offsetNode, pos.offset);
            range.collapse();
        }
        // Next, the WebKit way
        else if (document.caretRangeFromPoint) {
            range = document.caretRangeFromPoint(x, y);
        }
        // Finally, the IE way
        else if (document.body.createTextRange) {
            textRange = document.body.createTextRange();
            textRange.moveToPoint(x, y);
            var spanId = "temp_" + ("" + Math.random()).slice(2);
            textRange.pasteHTML('<span id="' + spanId + '">&nbsp;</span>');
            var span = document.getElementById(spanId);
            //place the new pin
            span.parentNode.replaceChild(el, span);
        }
        if (range) {
            //place the new pin
            range.insertNode(el);
        }
    });
    //remove the handler when the user has stopped dragging it
    $(document).on("mouseup", function () {
        $(document).off("mousemove");
    });
});