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;
  font: 14px/1.3 'Open Sans', Arial, sans-serif;
}

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

.group {
    margin: 50px 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;
    color: #0b446c;
}

.own .text {
    background: #e0dd16;
}

JavaScript

var replies = [];

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

    _.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' : '')+'">'+
                  '<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);
    
});