JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text_container">
    <h1 class="content_title">Speedling Expand</h1>
    <p>
        &nbsp;</p>
    <div>
        The speedling expand</div>
    <div>
        &nbsp;</div>
    <div>
        I know you're good, so I'll respect you and macro up myself</div>
    <div>
        This is the safest macro build against a fast expand. You're focussing on the fact that your opponents gas will be delayed ( and thus the metabolic boost upgrade ) for a long time, and you use your few speedlings to force Zerglings to be made for the opponent so he cannot capitalize on his advantage. Essentially giving you enough time to get your expansion up yourself.</div>
    <div>
        &nbsp;</div>
    <div>
        The build order.</div>
    <div>
        &nbsp;</div>
    <div>
        9 - Overlord</div>
    <div>
        14 - extractor</div>
    <div>
        14 - spawning pool</div>
    <div>
    </div>
    <div>
        16 - Overlord</div>
    <div>
        16 - Zergling pair</div>
    <div>
        17 - Metabolic boost ( Zergling speed )</div>
    <div>
        17 - Queen</div>
    <div>
        Make Zerglings until 22 and move to your opponents natural.</div>
    <div>
        22 - Expand</div>
    <div>
        Build more Zerglings and mix in a couple of drones.</div>
    <div>
        &nbsp;</div>

JavaScript

$j = jQuery.noConflict();

$selected_text = "";
redline_active = false;

$j = jQuery.noConflict();

$j(function() {
    redline_active = true;

    if (!window.TB) {
        TB = {};
    }

    TB.Selector = {};
    // http://stackoverflow.com/questions/5643635/how-to-get-selected-html-text-with-javascript
    // and
    // http://stackoverflow.com/questions/7690319/javascript-how-do-i-expand-a-user-selection-based-on-html-tags
    TB.Selector.getSelected = function() {
        var html = "";
        if (typeof window.getSelection != "undefined") {
            var sel = window.getSelection();
            if (sel.rangeCount) {
                var range = sel.getRangeAt(0);

                var startEl = sel.anchorNode;
                if (startEl != range.commonAncestorContainer) {
                    while (startEl.parentNode != range.commonAncestorContainer) {
                        startEl = startEl.parentNode;
                    }
                }
                var endEl = sel.focusNode;
                if (endEl != range.commonAncestorContainer) {
                    while (endEl.parentNode != range.commonAncestorContainer) {
                        endEl = endEl.parentNode;
                    }
                }
                range.setStartBefore(startEl);
                range.setEndAfter(endEl);

                sel.addRange(range);

                var container = document.createElement("div");
                container.appendChild(sel.getRangeAt(0).cloneContents());

                html = container.innerHTML;
            }
        } else if (typeof document.selection != "undefined") {
            if (document.selection.type == "Text") {
                html = document.selection.createRange().htmlText;
            }
        }
        return html;
    }

    TB.Selector.mouseup = function(e) {
        menu = $j("div#rl_menu");
        var x = e.clientX;
        var y = e.clientY;
        if (!menu.is(":visible")) {
            menu.css('left', x -...