JSFiddle - React, Tailwind, and code Playground

HTML

<form id="contactform">
          <li id="name">
            Name: <input id="name" name="name" class="name" maxlength="500" value="" type="text">
          </li>
          <li id="mail">
            E-Mail <input id="mail" name="mail" class="mail" maxlength="500" value="" type="email">
          </li>
          <li id="message">
            Message: <textarea id="message" name="message" class="message" style="resize: none;overflow: hidden;word-wrap: break-word" onkeyup="textAreaAdjust(this)"></textarea>
          </li>
        </form>

CSS

form input, form textarea {
	background: #FFF;
	border: none;
	margin: 10px;
	padding: 10px;
	font: 400 14px sans-serif;
	color: #45302b;
	-webkit-transition: all 0.27s ease-in-out;
	-moz-transition: all 0.27s ease-in-out;
	-ms-transition: all 0.27s ease-in-out;
	-o-transition: all 0.27s ease-in-out;
	transition: 0.27s ease-in-out;
}
form input:focus, form textarea:focus {
	background: #CA9822;
	color: #FFF;
}
body {
    background: #ccc;
    font: 400 14px sans-serif;
}
li {
    list-style: none;
}

JavaScript

function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (10+o.scrollHeight)+"px";
}