JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
            <pre id="overflowText" class="highlighter"><span></span><br /></pre>
			<textarea id="textarea1" maxlength="200"></textarea>
		</div>
		<div id="counter">Letters remaining: 140</div>
		<input type="Button" value="Done" id="doneButton"></input>

CSS

* {
				font-family: sans-serif;
				font-size: 10pt;
				font-weight: normal;
			}
			.wrapper {
				position: relative;
				width: 400px;
				height: 100px;
			}
			.wrapper > * {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				padding: 0;
				margin: 0;
				border: 0;
				overflow: hidden;
				resize: none;
				white-space: pre-wrap;      	/* CSS3 */   
				white-space: -moz-pre-wrap; 	/* Firefox */    
				white-space: -pre-wrap;     	/* Opera below 7 */   
				white-space: -o-pre-wrap;   	/* Opera 7 */    
				word-wrap: break-word;      	/* IE */
			}
			.highlighter {
				background-color: #eee;
				color: #f0f;
			}
			.highlight {
				background-color: #fd8;
				color: #f0f;
			}
			textarea {
				background-color: transparent;
				color:#000;
			}

JavaScript

function limitTextSize(e) {
				var max = 140
				var txt = $("#textarea1").val();
				var left = txt.substring(0, max);
				var right = txt.substring(max);
				var html = left + '<span class="highlight">' + right + "</span>";
				$("#overflowText").html(html);
				$("#counter").html("Letters remaining: " + (max - txt.length));
				$("#doneButton").attr("disabled", txt.length > max);
			}

			function maxLength(el) {    
				if (!('maxLength' in el)) {
					var max = el.attributes.maxLength.value;
					el.onkeypress = function () {
						if (this.value.length >= max) return false;
					};
				}
			}
			$(document).ready(function() {
				$("#textarea1").bind('input propertychange', limitTextSize)
				maxLength($("#textarea1"));
			});