JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div id="replies">
    
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

body {
  background: #1378bf;
}

body, textarea, button {
  font: 14px/1.3 'Open Sans', Arial, sans-serif;
  color: #0b446c;
}

#replies {
  margin: 50px auto;
  width: 600px;
}

.group {
    margin: 75px 0;
}

.reply {
    padding: 0 45px;
    margin: 15px 25px 15px 0;
    position: relative;
}

.reply.right {
    margin: 15px 0 15px 25px;
}

.userpic {
    position: absolute;
    left: 0;
    bottom: 7px;
}

.right .userpic {
    left: auto;
    right: 0;
}

.userpic img {
    display: block;
    max-width: 32px;
    border-radius: 4px;
}

.text {
    padding: 1px 15px;
    background: #fff;
    border-radius: 8px;
}

.own .text {
    background: #e0dd16;
}

.message {
    opacity: 0.8;
}

.message .text {
    background: none;
    color: #fff;

}

.message .text p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.form .text textarea{
    margin-bottom: 30px;
    padding-top: 12px;
    display: block;
    width: 100%;
    height: 60px;
    background: none;
    border: 0 none;
    resize: none;
}

.form .text textarea:focus {
    outline: 0 none;
}

.form .text {
    position: relative;
}

.form button {
    margin: 0;
    padding: 5px 15px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: none;
    border-width: 2px 0 0 2px;
    border-style: solid;
    border-color: #1378bf;
    border-radius: 8px 0 8px 0;
}

.form button:hover {
    background: rgba(0, 0, 0, 0.1);
}

JavaScript

var replies = [];

$.get('https://bnw.im/api/show?message=3BNMXQ&replies=1').success(function (data) {
  var group = [];
  
  $.each(data.replies, function (i, reply) {
    if (!group.length) group = [data.message];
    if (!group.length || (reply.replyto && reply.replyto == _.last(group).id)) {
        
    } else {
      replies.push(group);
      group = [data.message];
      var parent = _.findWhere(data.replies, {
        'id': reply.replyto
      });
      if (parent) group.push(parent);
    }      
      group.push(reply);
  });
    replies.push(group);
    
    var text = '';
    
    console.log(replies);

    _.each(replies, function (group) {
        text+='<div class="group">';
        _.each(group, function (reply, i) {
            text+='<div class="reply '+((i % 2 == 0) ? '' : 'right')+' '+((reply.user == 'autism') ? 'own' : '')+' '+((group.length > 1 && reply.replycount) ? 'message' : '')+'">'+
                  '<div class="userpic">'+
                  '<img src="https://bnw.im/u/'+reply.user+'/avatar/thumb">'+
                  '</div><div class="text">'+
                  '<p>'+reply.text.replace(/^@([^\s]+)/, '').replace(/\n/g, '</p><p>')+'</p>'+
                  '</div></div>';
        });
        text+='</div>';
    });
    
    $('#replies').append(text);
    
    $('#replies').on('click', '.reply', function (event) {
        if ($(event.currentTarget).hasClass('form') || window.getSelection().type == 'Range') return;
        $('#replies .form').remove();
        $(event.currentTarget).after(
            '<div class="reply own form '+(($(event.currentTarget).hasClass('right')) ? '' : 'right')+'">'+
            '<div class="userpic"><img src="https://bnw.im/u/autism/avatar/thumb"></div>'+
            '<div class="text">'+
            '<textarea></textarea>'+
            '<button>Send</button>'+
            '</div>'+
            '</div>'
        );
        $(event.currentTarget).next().find('textarea').focus();
    });
    
   ...