JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.highlighted{
     background: #8DF;   
}

JavaScript

/*
    CONSTANTS
*/
var HORIZONTAL_MENU_OFFSET = 85;
var VERTICAL_MENU_OFFSET = 40;
var MENU_FADE_IN_TIME = 200;
var MENU_FADE_OUT_TIME = 100;
var MINIMUM_SELECTION_LENGTH = 1;

// indexes for the data array
var HIGHLIGHT_HTML = 0;
var HIGHLIGHT_START_INDEX = 1;
var HIGHLIGHT_END_INDEX = 2;
var HIGHLIGHT_ANCHOR_NODE = 3;
var HIGHLIGHT_END_NODE = 4;
var NODE_START_OFFSET = 5;
var NODE_END_OFFSET = 6;
var CONTENT_HASH = 7;
var DATA_SIZE = 8;

// flags
var debug_on = true;
var use_block_highlighting = false;


$selected_text = "";
var redline_active = false;
var selection_threshold = 20;
var current_start_index = 0;
var current_end_index = 0;
var current_selection_data;

// dom elements
var debug_dialog;


$j = jQuery.noConflict();


/*
=================
    BEGIN!
=================
*/
redline_active = true;
$j(function() {
    if (debug_on) {
        $j("body").append("<div id='debug_box_dialog' \
                        style='position: fixed; top: 0px; right: 0px; background: #eee; color: black; \
                        padding: 5px; box-shadow: 0 2px 5px rgba(0,0,0, 0.5);' \
                        ></div>");
        debug_dialog = $j("#debug_box_dialog")
    }

    $j(".redline_activate").click(function() {
        if (redline_active == false) {
            redline_active = true;
            $j(this).html("Redlining ON");
            $j(this).addClass("redline_active")
        } else {
            redline_active = false;
            $j(this).html("Redlining OFF");
            $j(this).removeClass("redline_active")


        }
    });


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

    TBR.getSelectionData = function(parent_element) {
        var html = "";

        sel = window.getSelection(); // not sure how many browsers this works on.
        var temp = document.createElement("div");

        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            curr_range = sel.getRangeAt(i);

            temp.appendChild(curr_range.cloneContents());

       ...