JSFiddle - React, Tailwind, and code Playground

HTML

<textarea style="width:300px; font-size:14px; padding:5px 10px;"></textarea>
<div class="tracker"></div>

CSS

body{
	background: #eceaea;
    font-family: Helvetica, Arial, sans-serif;
}
textarea{
	background: #fff;
	border: none;
	font-size: 1.4rem;
	line-height: 1.5;
	height: 80px;
	outline: none;
	overflow: hidden;
	padding: 0;
	resize: none;
	width: 280px;
	margin:0.9rem auto;
	border-color: #848484 #c1c1c1 #e1e1e1;
	color: #000;
	white-space: pre-wrap;
	word-wrap: break-word;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	-webkit-rtl-ordering: logical;
	-webkit-user-select: text;
	flex-direction: column;
	-webkit-writing-mode: horizontal-tb;

}

JavaScript

jQuery.fn.trackRows = function() {
    return this.each(function() {

        var ininitalHeight, currentRow, iteration = 0;

        var createMirror = function(textarea) {
            jQuery(textarea).after('<div class="autogrow-textarea-mirror"></div>');
            return jQuery(textarea).next('.autogrow-textarea-mirror')[0];
        }

        var sendContentToMirror = function (textarea) {
            mirror.innerHTML = String(textarea.value.substring(0,textarea.selectionStart)).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br />') + '.<br/>.';

           calculateRowNumber();
       }

       var growTextarea = function () {
           sendContentToMirror(this);
       }

       var calculateRowNumber = function () {
           if(iteration===0){
               ininitalHeight = $(mirror).height();
               currentHeight = ininitalHeight;
               iteration++;
           }
           else{
               currentHeight = $(mirror).height();
           }

           currentRow = currentHeight/(ininitalHeight/2) - 1;
           
           //remove tracker in production
           $('.tracker').html('Current row: ' + currentRow);
      }

                // Create a mirror
      var mirror = createMirror(this);
                
                // Style the mirror
                mirror.style.display = 'none';
                mirror.style.wordWrap = 'break-word';
                mirror.style.whiteSpace = 'normal';
                mirror.style.padding = jQuery(this).css('padding');
                mirror.style.width = jQuery(this).css('width');
                mirror.style.fontFamily = jQuery(this).css('font-family');
                mirror.style.fontSize = jQuery(this).css('font-size');
                mirror.style.lineHeight = jQuery(this).css('line-height');

                // Style the textarea
                this.style.overflow = "hidden";
               ...