JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<textarea class="area"></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;
  resize:none;

  overflow: hidden;
  vertical-align: top;
  text-align: center;
}

JavaScript

$(document).on('keyup keydown','textarea', function(){
    fitText();
});
function fitText(){
    var textarea = $('textarea');
    if(textarea.val() !== ''){
        while((textarea.get(0).scrollHeight < (textarea.outerHeight()+1)) && (textarea.get(0).scrollWidth < (textarea.outerHeight()+1))){
            textarea.css('font-size','+=1');
        }
        while((textarea.get(0).scrollHeight > (textarea.outerHeight()+1)) || (textarea.get(0).scrollWidth > (textarea.outerHeight()+1))){
            textarea.css('font-size','-=1');
        }
    }
}
fitText();