JSFiddle - React, Tailwind, and code Playground

HTML

<textarea>東京は、江戸幕府の所在地の江戸を1868年9月に改称したものであり[1]、1869年2月11日（明治2年1月1日）に遷都、1878年（明治11年）に府制を施行[1]、「東京府」となった。</textarea>

CSS

.highlightTextarea {
    position: relative;
    overflow: hidden
}

.highlightTextarea .container {
    position: absolute;
    margin: 0;
    overflow: hidden
}

.highlightTextarea .highlighter {
    position: relative;
    border: none;
    padding: 0;
    margin: 0;
    color: transparent;
    cursor: text;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word
}

.highlightTextarea.debug .highlighter {
    color: red;
    border: 1px solid red;
    margin: -1px
}

.highlightTextarea mark {
    line-height: inherit;
    color: transparent;
    margin: 0;
    padding: 0
}

.highlightTextarea input,.highlightTextarea textarea {
    position: absolute;
    left: 0;
    top: 0;
    resize: none;
    white-space: pre-wrap;
    word-wrap: break-word
}

.highlightTextarea .ui-wrapper {
    margin: 0!important
}

.highlightTextarea .ui-resizable-se {
    bottom: 15px;
    right: 0
}

textarea{
    width:300px;
    height:200px;
}

JavaScript

/*!
 * jQuery highlightTextarea 3.1.0
 * Copyright 2014 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
 * Licensed under MIT (http://opensource.org/licenses/MIT)
 */
/*!
 * jQuery highlightTextarea 3.1.0
 * Copyright 2014 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
 * Licensed under MIT (http://opensource.org/licenses/MIT)
 */! function(a) {
    "use strict";
    var b = function(d, e) {
        this.settings = a.extend({}, b.DEFAULTS), this.scrollbarWidth = c.getScrollbarWidth(), this.isInput = "input" == d[0].tagName.toLowerCase(), this.active = !1, this.$el = d, this.$el.wrap("<div class=highlightTextarea></div>"), this.$main = this.$el.parent(), this.$main.prepend("<div class=container><div class=highlighter></div></div>"), this.$container = this.$main.children().first(), this.$highlighter = this.$container.children(), this.setOptions(e), this.settings.id && (this.$main[0].id = this.settings.id), this.settings.resizable && this.applyResizable(), this.updateCss(), this.bindEvents(), this.highlight()
    };
    b.DEFAULTS = {
        words: {},
        ranges: {},
        color: "#ffff00",
        caseSensitive: !0,
        resizable: !1,
        id: "",
        debug: !1
    }, b.prototype.highlight = function() {
        var b = c.htmlEntities(this.$el.val()),
            d = this;
        a.each(this.settings.words, function(a, c) {
            b = b.replace(new RegExp("(" + c.join("|") + ")", d.regParam), '<mark style="background-color:' + a + ';">$1</mark>')
        }), a.each(this.settings.ranges, function(a, d) {
            d.start < b.length && (b = c.strInsert(b, d.end, "</mark>"), b = c.strInsert(b, d.start, '<mark style="background-color:' + d.color + ';">'))
        }), this.$highlighter.html(b), this.updateSizePosition()
    }, b.prototype.setWords = function(a) {
        this.setOptions({
            words: a,
            ranges: {}
        })
    }, b.prototype.setRanges = function(a) {
        this.setOptions({
            words:...