JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input">
    <label>Username</label>
    <textarea rows="fit" placeholder aria-label="Multiple lines and a floating label" aria-invalid="false" fit></textarea>
    <div class="border-bottom">
        <div class="underline"></div>
        <div class="underlineHighlight"></div>
    </div>
    <div class="errorContainer">
      <div class="error" role="alert" aria-hidden="true"></div>
      <div class="errorIcon"></div>
    </div>
</div>

<div class="input">
    <label>Username</label>
    <textarea rows="fit" placeholder aria-label="Multiple lines and a floating label" aria-invalid="false" fit></textarea>
    <div class="border-bottom">
        <div class="underline"></div>
        <div class="underlineHighlight"></div>
    </div>
    <div class="errorContainer">
      <div class="error" role="alert" aria-hidden="true"></div>
      <div class="errorIcon"></div>
    </div>
</div>

CSS

body {
    font-family: sans-serif;
}

.input {
    height: 73px;
    width: 320px;
}

.input label {
    position: absolute;
    height: 19px;
    margin-top: 24px;
    float: left;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

.input label.animate {
    color: #4059a9;
    -moz-transform: scale(0.7) translateY(-27px);
    -webkit-transform: scale(0.7) translateY(-27px);
    -o-transform: scale(0.7) translateY(-27px);
    -ms-transform: scale(0.7) translateY(-27px);
    transform: scale(0.7) translateY(-27px);
}

.input textarea {
    width: 320px;
    height: 19px;
    resize: none;
    -webkit-writing-mode: horizontal-tb;
    -webkit-appearance: textarea;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    flex-direction: column;
    cursor: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    outline: none;
    border: 0 none;
    padding: 0;
    margin: 24px 0 0 0;
    font: inherit;
}

.input .border-bottom {
    top: 35px;
}

.input .underline {
    height: 1px;
    background: #757575;
    border-bottom-color: #757575;
}

.input .underlineHighlight {
    color: #4059a9;
    background: #4059a9;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
}

.input .underlineHighlight.animate {
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
    -webkit-transform: scale(1);
    background: #4059a9;
}

.input .errorContainer {
    height: 24px;
}

JavaScript

$$('.input').addEvent('click', function(e) {
    var target = document.id(e.target),
        input = (target.match('.input'))?target:target.getParent('.input'),
        textarea = input.getChildren('textarea')[0],
        textareaLength = textarea.get('value').length,
        label = input.getChildren('label')[0],
        underlineHighlight = input.getElement('.underlineHighlight');
    
    textarea.focus();
});

$$('.input textarea').addEvent('blur', function(e){
    var target = document.id(e.target),
        input = target.getParent('.input'),
        textarea = input.getChildren('textarea')[0],
        textareaLength = textarea.get('value').length,
        label = input.getChildren('label')[0],
        underlineHighlight = input.getElement('.underlineHighlight');

    if (textareaLength == 0) {
        label.removeClass('animate');
        underlineHighlight.removeClass('animate');
    }
});

$$('.input textarea').addEvent('focus', function(e){
    var target = document.id(e.target),
        input = (target.match('.input'))?target:target.getParent('.input'),
        textarea = input.getChildren('textarea')[0],
        textareaLength = textarea.get('value').length,
        label = input.getChildren('label')[0],
        underlineHighlight = input.getElement('.underlineHighlight');

    if (textareaLength == 0) {
        label.addClass('animate');
        underlineHighlight.addClass('animate');
    }
});

window.onblur=function(){ document.activeElement.focus(); };