JSFiddle - React, Tailwind, and code Playground

HTML

<textarea class='area' placeholder='Your text here'></textarea>

CSS

.area {
  /* Override needed textarea customized in iframe.css */
  width:  300px;
  height: 300px;
  border:  0;
  padding: 0;
  margin:  0;

  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.5);    
  position : absolute;
  outline:none;
  resize:none;

  overflow: hidden;
  vertical-align: top;
  text-align: center;
  letter-spacing: 2px;
  font-size: 17px;
}

JavaScript

var textArea = $('.area');

var keyupHandler = function(e) {
    console.log('keyup');
   while ( textArea[0].scrollHeight <= textArea.height()) {
       console.log('increase');
      textArea.css('font-size', '+=1');
   }
}
textArea.on('keyup',keyupHandler);