JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Lobster" rel="stylesheet">
<body>
    <p><label for="review">Seu comentário</label></p> <small id="typo" class="caracteres text-area-typo default-typo"></small></p>
    <textarea name="comentario" id="comentario" cols="30" rows="10"></textarea></p>

</body>

CSS

.text-area-typo {
  font-family: 'Lobster', cursive;
}

.box {
  width: 400px;
  height: 400px;
}

.small-typo {
  font-size: 1px;
}

.normal-typo {
  font-size: 30px;
}

.large-typo {
  font-size: 50px;
}

.extra-typo {
  font-size: 100px;
}

JavaScript

$(document).on("input", "#comentario", function() {


        var limite = 145;
        var informativo = $(this).val();
        var caracteresDigitados = $(this).val().length;
        var caracteresRestantes = limite - caracteresDigitados;
        
        
        if (caracteresDigitados > 0 && caracteresDigitados < 5) {
      		$('.caracteres').addClass('extra-typo').removeClass('default-typo');
        }else {
        	if (caracteresDigitados > 5 && caracteresDigitados < 15) {
							$('.caracteres').addClass('large-typo').removeClass('extra-typo');
          } else {
          	if (caracteresDigitados > 15 && caracteresDigitados < 25) {
								$('.caracteres').addClass('normal-typo').removeClass('large-typo');
            }
          }
        }
        
        function trocaClasse(elemento, antiga, nova) {
    elemento.classList.remove(antiga);
    elemento.classList.add(nova);
    
}

        if (caracteresRestantes <= 0) {
            var comentario = $("textarea[name=comentario]").val();
            $("textarea[name=comentario]").val(comentario.substr(0, limite));
            $(".caracteres").text(informativo);
        } else {
            $(".caracteres").text(informativo);
        }
        

    });
    
    
    

 function insere() {
      var texto = typo.value;
      if (texto == '') texto = 0;
      typo.innerHTML = texto;
    }