JSFiddle - React, Tailwind, and code Playground

HTML

type #somewoerd or @someword:
<br />
<br />
<div id="highlighter" placer='1'></div>
<div id='copy_hashes'></div>
<!--Optional-->
<div id='copy_at'></div>
<!--Optional-->
<!--For direction change slowly press ctrl and the press the shift and release-->
<!--Char counter is optional-->
<!--Match containers are optional-->

JavaScript

//create hightlight text area:
create_bind_textarea_highlight({
    eleId: "highlighter", //<= div container id, make sure the container has a placer 
    //   attribute or it will be set to random number.
    width: 400, //<= px, DEF: 300
    height: 110, //<= px, DEF: 100
    padding: 5, //<= px, DEF: 5
    background: 'white', //<= DEF: white
    backgroundControls: '#585858', //<= DEF: #151515
    radius: 5, //<= px, DEF: 5
    fontFamilly: 'Arial', //<= DEF: arial
    fontSize: 13, //<= px, DEF: 13
    //lineHeight:		18,													//<= px, DEF: font size +5px
    counterlettres: true, //<= enable counter Def false
    counterFont: 'red', //<= DEF: black
    matchpatterns: [
        ["(#[0-9A-Za-z]{0,})", "$1"],
        ["(@[0-9A-Za-z]{0,})", "$1"]
    ], //<= patterns that should be highlighted - escape back slashes,
    //   those patterns will highliht #someword,@somtext
    hightlightsColor: ['#00d2ff', '#FFBF00'], //<= highlight colors for patterns according index DEF if not
    //   set is YELLOW.
    objectsCopy: ["copy_hashes", "copy_at"] //<= Optional containers id that should copy matches according
    //   index.
    //PRESS Ctrl + SHIFT for direction swip!
});


//build function -> u can create as many as you want !
function create_bind_textarea_highlight(optionsHigh) {
    if (optionsHigh.eleId != 'undefined') {
        //elements:
        var conn = $('#' + optionsHigh.eleId);
        var placer = $(conn).attr('placer');

        if (conn.length) {
            if (placer != 'undefined') {

                //create elements:
                $(conn).html("<textarea id='text_" + placer + "'></textarea><div id='cloner_" + placer + "' class='copier'></div><p id='control_" + placer + "'>X</p>");

                var connTextArea = $('#' + optionsHigh.eleId).children('textarea');
                var cloner = $('#' + optionsHigh.eleId).children('div#cloner_' + placer);
                var controls = $('#' + optionsHigh.eleId).children('p');
          ...