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 . . ." col="12" row="10"></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

$('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();
      }
});

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; 
}