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