JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<textarea id="comments" placeholder="Partagez votre journée ici..." class="common"></textarea>

CSS

body {
    margin: 20px;
}
p {
    margin-bottom: 14px;
}
textarea {
    color: #444;
    padding: 5px;
}
.txtstuff {
    resize: none;
    /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden;
}
.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* future version of deprecated 'word-wrap' */
}
/* the styles for 'commmon' are applied to both the textarea and the hidden clone */

/* these must be the same for both */
 .common {
    width: 500px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
    -moz-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
    border:#ccc 1px solid;
}
.common:focus {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
    -moz-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
    border-radius:2px;
    -o-box-shadow:0 0 2px #09F;
    box-shadow:0 0 2px #09F;
    border:#09F 1px solid;
    min-height:50px;
}
.lbr {
    line-height: 3px;
}

JavaScript

var txt = $('#comments'),
    hiddenDiv = $(document.createElement('div')),
    content = null;

txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');

$('body').append(hiddenDiv);

txt.on('keyup', function () {

    content = $(this).val();

    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content + '<br class="lbr">');

    $(this).css('height', hiddenDiv.height());

});