JSFiddle - React, Tailwind, and code Playground

by techiedelight

HTML

<label for="story">Tell us your story:</label>

<textarea id="story" name="story" rows ="3" cols="33">
It was a dark and stormy night...
</textarea>

CSS

label,
textarea {
    font-size: 0.8rem;
    letter-spacing: 1px;
}
textarea {
    padding: 10px;
    line-height: 1.5;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px #999;
}

label {
    display: block;
    margin-bottom: 10px;
}

JavaScript

$(document).ready(function() {
  $('textarea').on('keyup keypress', function() {
    $(this).height(0);
    $(this).height(this.scrollHeight);
  });
});