JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="characters">100</textarea>
<div id="upto100">
This is content up to 100 characters
</div>
<div id="upto200">
This is content up to 200 characters
</div>
<div id="upto300">
This is content up to 300 characters
</div>
CSS
div {
width: 250px;
height: 60px;
background-color: black;
color: white;
display: none;
}
JavaScript
$(document).ready(function(){
$('#characters').bind('keyup change', function(){
var elem = $('#upto' + $(this).val());
if(this.lastElem)
this.lastElem.fadeOut('slow');
if(elem.length){
this.lastElem = elem;
elem.fadeIn('slow');
}
});
});