Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{ box-sizing: border-box; font-size: 16px; padding:0px; list-style:none; text-decoration:none; margin:0px; font-family:"Poppins"}
.textarea-box {
    max-width: 500px;
    width: 100%;
    height: auto;
    border: #ccc 1px solid;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    background-color: #ededed;
    margin: auto;
    margin-top: 5%;
}
.textarea-group {
  padding: 20px;
}
.textarea-box-inner {
	width: 100%;
	padding: 15px;
}
/**Typeo CSS Start**/
.counts-info {
	width: 100%;
}
.counts-info textarea { padding: 10px; height: 150px; width: 100%; }

document.addEventListener("DOMContentLoaded", function() {
  var max_text = 200;
  var textcount = document.querySelector('.textcount');
  textcount.innerHTML = max_text + ' Count Number';

  var textarea = document.getElementById('textarea');
  textarea.addEventListener('keyup', function() {
    var text_count = textarea.value.length;
    var txt_r = max_text - text_count;
    textcount.innerHTML = txt_r + ' Character Count Number';
  });

  var contInfoParagraphs = document.querySelectorAll('.cont-info p');
  contInfoParagraphs.forEach(function(paragraph) {
    if (paragraph.textContent.length > max_text) {
      paragraph.classList.add('moretxt');
    } else {
      paragraph.classList.add('lesstxt');
    }
  });
});