JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="box">
<p>(Maximum Allowed Characters : 160)</p>
<p><textarea id="area" rows="10" cols="40"></textarea></p>
<span id="message"> 160 </span> Characters Remaining
<input type="button" id="tweet" value="Tweet"/>
</div>
<body>
CSS
#box{
width:400px;
height:230px;
background-color: pink;
margin:50 auto 0;
padding-top:20px;
padding-left:40px ;
}
p{
margin: 0;
}
#area{
margin-bottom: 10px;
}
#tweet{
margin-left: 130px;
}
.minus{
color: red;
}
JavaScript
$(document).ready(function(){
$("#tweet").attr("disabled","disabled");
$("#area").keyup(function(){
var chars=$(this).val().length;
$("#message").text(160-chars);
if(chars > 160 || chars <=0){
$("#tweet").attr("disabled","disabled");
$("#message").addClass("minus");
$(this).css("text-decoration","line-through");
}else{
$("#tweet").removeAttr("disabled");
$("#message").removeClass("minus");
$(this).css("text-decoration","");
}
});
});