JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title>
		sample
	</title>
	<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
	<div class="tweeet" id="tweeet" contenteditable="true" ></div>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>

CSS

.tweeet {
    width: 50%;
    height: 100px;
    border-style: inset;
    border-width: 5px;
    border-color: blue;
    background-color: #cccccc;
    margin: 3px;
    padding: 5px;
    float: left;
}

JavaScript

var tweeet = document.getElementById('tweeet');

tweeet.onkeyup = function(event) {
	var newTweeet = tweeet.textContent;
	if(newTweeet.length > 15){
		tweeet.textContent = "";
		var content = document.createElement('span');
		var extra = document.createElement('span');
		content.textContent = newTweeet.slice(0, 15);
		extra.textContent = newTweeet.slice(15, newTweeet.length)
		extra.style.color = 'red';
		tweeet.appendChild(content);
		tweeet.appendChild(extra);
	}	
};