JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div id="message">
<textarea class="textarea-autosize" value="" autocomplete="off" rows="1" style>
</textarea>
</div>

CSS

textarea {
    background-color: transparent;
    border: none;
    border-bottom: solid 1px rgba(0,0,0,.25);
    padding: 12px 0;
    width: 100%;
    color: #000;
    display: block;
    border-radius: 0;
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    resize: vertical;
}

textarea:focus {
    outline: none;
}

JavaScript

var textarea = document.getElementsByTagName("textarea")[0];
textarea.onkeyup = function () {
	__resizeTextarea(this);
};


function 	__resizeTextarea(textarea) {
  textarea.style.height = 'auto';
  var textareaHeight = textarea.scrollHeight - (parseInt(window.getComputedStyle(textarea, null).getPropertyValue('padding-top')) + parseInt(window.getComputedStyle(textarea, null).getPropertyValue('padding-bottom')));
	textarea.style.height = textareaHeight + 'px';
}