JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="textarea" onkeyup="limitText()" maxlength="10"></textarea>
<span class="charcount_text" name="charcount_text" id="charcount_text"></span>
</br>
<span class="showall" name="showall" id="showall"></span>


    
    <script type='text/javascript'>
function limitText() {
      
      var textarea= document.getElementById('textarea');
      var char_label = document.getElementById('charcount_text');
      
      var textinside = document.getElementById('showall');

      var count = textarea.value.length;
      var max = textarea.maxLength;
      console.log(count + " " + max);
      var remaining = max - count;
      if(remaining <= 0) {
        char_label.innerHTML = '10 character limit reached.' ;
      } else if(remaining <= 5) {
        char_label.innerHTML = '10 character limit, ' + remaining  + ' remaining.';
      } else {
       char_label.innerHTML = count;        
      }
        var enteredText = textarea.value;
        numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length;
        var characterCount = enteredText.length + numberOfLineBreaks;
        textinside.innerHTML = characterCount;
    }
    </script>

CSS

textarea {
  width:200px;
  height:80px;
}