JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contact">

<form method="post" action="#">

						<textarea id="message" class="message_autogrow" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">Message</textarea>
						<div class="send">
							<button type="submit">Send</button>
						</div>
					</form>
</div>

CSS

#contact form textarea {
	display: block;
	margin: 16px 0 0 0;
	padding: 0;
	color: #084a94;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	line-height: 22px;
	width: 345px;
	border: none;
	border-bottom: 1px solid #122266;
	resize: none;
	height: 25px;
}

JavaScript

jQuery.fn.autoGrow=function(){return this.each(function(){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).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\n/g,"<br />")+".<br/>.";if(jQuery(textarea).height()!=jQuery(mirror).height())jQuery(textarea).height(jQuery(mirror).height())};
var growTextarea=function(){sendContentToMirror(this)};var mirror=createMirror(this);mirror.style.display="none";mirror.style.wordWrap="break-word";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");this.style.overflow="hidden";this.style.minHeight=this.rows+"em";this.onkeyup=growTextarea;sendContentToMirror(this)})};

$(function() {
   $('#message').autoGrow();
});