JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<textarea name="message" row="2" class="question" id="msg" autocomplete="off" placeholder="comments..."></textarea><label for="msg"></label>

CSS

textarea {
    font-family:'Ubuntu', sans-serif;
    display: block;
    border: none;
    resize: none;
}
textarea:focus {
    outline: 0;
}
/* Question */
textarea.question {
    font-weight: 300;
    border-radius: 2px;
    border: none;
    width: 80%;
    background: rgba(0, 0, 0, 0);
    overflow-x: hidden;
    /* Hack to make "rows" attribute apply in Firefox. */
}
/* Underline and Placeholder */
textarea.question + label {
    display: block;
    position: relative;
    white-space: nowrap;
    width: 10%;
    border-top: 2px solid #0DA8E3;
    -webkit-transition: width 0.4s ease;
    transition: width 0.4s ease;
}
textarea.question:focus + label {
    width: 100%;
}