JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text1">Please retype this.</div>
<div id="diff1"></div>
<textarea id="typeArea1"></textarea>
<div id="count"></div>

CSS

body {
    font-family: verdana;
    font-size: 10pt;
    margin: 10px;
}
#diff1 {
    height: 1.3em;
}
#diff1.success { 
    background-color: #9C9;
}
#typeArea1 {
    width: 300px;
    height: 1.3em;
    margin: 6px 0;
}
del {
    display: none;
}
ins {
    background-color: #C99;
}

JavaScript

var DIFF = (function() {
/*
 * Javascript Diff Algorithm
 *  By John Resig (http://ejohn.org/)
 *  Modified by Chu Alan "sprite"
 *
 * Released under the MIT license.
 *
 * More Info:
 *  http://ejohn.org/projects/javascript-diff-algorithm/
 */

    String.prototype.tagWrap = function(tagName) {
        return '<' + tagName + '>' + this + '</' + tagName + '>';
    }

    function escape(s) {
        var n = s;
        return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
    }

    function diff(o, n) {
        var ns = {},
            os = {};

        for (var i = 0; i < n.length; i++) {
            if (ns[n[i]] == null) ns[n[i]] = [];
            ns[n[i]].push(i);
        }

        for (var i = 0; i < o.length; i++) {
            if (os[o[i]] == null) os[o[i]] = [];
            os[o[i]].push(i);
        }

        for (var i in ns) {
            if (ns[i].length == 1 && typeof(os[i]) != "undefined" && os[i].length == 1) {
                n[ns[i][0]] = {
                    text: n[ns[i][0]],
                    row: os[i][0]
                };
                o[os[i][0]] = {
                    text: o[os[i][0]],
                    row: ns[i][0]
                };
            }
        }

        for (var i = 0, i_ = 1; i < n.length - 1; i++, i_++) {
            if (n[i].text != null && n[i_].text == null && n[i].row + 1 < o.length && o[n[i].row + 1].text == null && n[i_] == o[n[i].row + 1]) {
                n[i + 1] = {
                    text: n[i_],
                    row: n[i].row + 1
                };
                o[n[i].row + 1] = {
                    text: o[n[i].row + 1],
                    row: i_
                };
            }
        }

        for (var i = n.length - 1, i_ = i - 1; i > 0; i--, i_--) {
            if (n[i].text != null && n[i_].text == null && n[i].row > 0 && o[n[i].row - 1].text == null && n[i_] == o[n[i].row - 1]) {
                n[i_] = {
                    text:...