JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="image_pic"></div>
    <div id="insert_container">
        <form id="commentform">
            <textarea id="commenttextarea" placeholder="write a comment . . ."></textarea>
        </form>
    </div>
</div>

CSS

html, body {
    background: #ffffff;
    margin: 0 auto;
    padding: 0 auto;
}
#container {
    width:476px;
    height:66px auto;
}
#insert_container {
    float:left;
    clear:left;
    width:476px;
    height:66px;
    background: #afafaf;
    z-index:-1;
}
#commentform {
}
#insert_container #commentform #commenttextarea {
    padding:5px 5px 5px 5px;
    resize:none;
    width:380px;
    height:15px;
    border-left:76px solid #AFAFAF;
    border-right:10px solid #AFAFAF;
    border-bottom:17px solid #AFAFAF;
    border-top:10px solid #AFAFAF;
}
#image_pic {
    width:55px;
    height:54px;
    background: #000000;
    margin:6px 5px 5px 6px;
    float:left;
    position:absolute;
}

JavaScript

function getCaret(el) {
    if (el.selectionStart) {
        return el.selectionStart;
    } else if (document.selection) {
        el.focus();
        var r = document.selection.createRange();
        if (r == null) {
            return 0;
        }
        var re = el.createTextRange(),
            rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
    }
    return 0;
}
$('#commenttextarea').keyup(function (event) {
    if (event.shiftKey && event.keyCode == 13) {
        var content = this.value;
        var caret = getCaret(this);
        this.value = content.substring(0, caret) + "\n" + content.substring(caret, content.length - 1);
        event.stopPropagation();
    } else if (event.keyCode == 13) {
        $('#commentform').submit();
    }
});