JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ligamagic.com.br/teste/ckeditor4x/samples/extras/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://ligamagic.com.br/teste/ckeditor4x/samples/extras/jquery.mentionsInput.css">
<script src="http://ligamagic.com.br/teste/ckeditor4x/ckeditor.js"></script>
<link rel="stylesheet" href="http://ligamagic.com.br/teste/ckeditor4x/samples/sample.css">
<script src="http://ligamagic.com.br/teste/ckeditor4x/samples/extras/underscore-min.js"></script>
<form action="sample_posteddata.php" method="post">
		<textarea class="mention" cols="80" id="editor1" name="editor1" rows="10">
			teste <b>teste</b> teste <em>teste</em> teste
		</textarea>

		<p style="overflow: hidden">
			<input style="float: left" type="submit" value="Submit">
		</p>
	</form>

JavaScript

(function ($, _, undefined) {

	// Settings
	var KEY = { BACKSPACE : 8, TAB : 9, RETURN : 13, ESC : 27, LEFT : 37, UP : 38, RIGHT : 39, DOWN : 40, COMMA : 188, SPACE : 32, HOME : 36, END : 35 }; // Keys "enum"
	var defaultSettings = {
			triggerChar   : '@',
			onDataRequest : $.noop,
			minChars      : 2,
			showAvatars   : true,
			classes       : {
		autoCompleteItemActive : "active"
	},
	templates     : {
		wrapper                    : _.template('<div class="mentions-input-box"></div>'),
		autocompleteList           : _.template('<div class="mentions-autocomplete-list"></div>'),
		autocompleteListItem       : _.template('<li data-ref-id="<%= id %>" data-ref-type="<%= type %>" data-display="<%= display %>"><%= content %></li>'),
		autocompleteListItemAvatar : _.template('<img  src="<%= avatar %>" />'),
		autocompleteListItemIcon   : _.template('<div class="icon <%= icon %>"></div>'),
		mentionItemSyntax          : _.template('@[<%= value %>](<%= type %>:<%= id %>)'),
		mentionItemHighlight       : _.template('<strong><span><%= value %></span></strong>')
	}
	};

	var utils = {
			htmlEncode       : function (str) {
		return _.escape(str);
	},
	highlightTerm    : function (value, term) {
		if (!term && !term.length) {
			return value;
		}
		return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
	},
	setCaratPosition : function (domNode, caretPos) {
		if (domNode.createTextRange) {
			var range = domNode.createTextRange();
			range.move('character', caretPos);
			range.select();
		} else {
			if (domNode.selectionStart) {
				domNode.focus();
				domNode.setSelectionRange(caretPos, caretPos);
			} else {
				domNode.focus();
			}
		}
	},
	rtrim: function(string) {
		return string.replace(/\s+$/,"");
	}
	};

	var MentionsInput = function (input) {
		var settings;
		var elmInputBox, elmInputWrapper, elmAutocompleteList, elmWrapperBox, elmActiveAutoCompleteItem;
		var mentionsCollection = [];
		var...