JSFiddle - React, Tailwind, and code Playground

HTML

<div class="conversation">
    <blockquote class="p1"><cite>Phrogz</cite> Hello, there?</blockquote>
    <blockquote class="p2"><cite>George</cite> Yeah, 'sup?</blockquote>
    <blockquote class="p1"><cite>Phrogz</cite> Bored on s/o</blockquote>
    <blockquote class="p3"><cite>Alon</cite> Can you help me?</blockquote>
    <blockquote class="p1"><cite>Phrogz</cite> Uh, sure.</blockquote>
    <blockquote class="p4"><cite>Psych</cite> Spam spam spam!</blockquote>
    <blockquote class="p1"><cite>Phrogz</cite> Shut it!</blockquote>
    <blockquote class="p3"><cite>Alon</cite> Awesomesauce! I'm gonna give you mad rep for this one! Thanks for your help, I'm totally going to accept your answer.</blockquote>
    <blockquote class="p1"><cite>Phrogz</cite> ;)</blockquote>
</div>

CSS

.conversation blockquote {
    border:3px solid black;
    padding:0.2em 0.5em;
    color:black;
    border-color:rgba(0,0,0,0.3);
    margin:0.5em;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.conversation blockquote cite { font-weight:bold; color:rgba(0,0,0,0.5); padding-right:0.4em }
.conversation .p1 { background:#6cf }
.conversation .p2 { background:#f93 }
.conversation .p3 { background:#6c3 }
.conversation .p4 { background:#cc6 }

JavaScript

$(function(){
    var conversationSelector = '.conversation';
    var quoteSelector        = 'blockquote';
    var indentSizeInEm       = 2;
    var updateContactList = function(){
        $(conversationSelector).each(function(){
            var classes = {};
            var convo = $(this);
            convo.find(quoteSelector).each(function(){
                // Assumes each quote will have only one class!
                classes[this.className] = true;
            });
            var sortedClasses = [];
            for (var className in classes){
                sortedClasses.push(className);
            };
            var convoPeople = sortedClasses.length;
            sortedClasses.sort();
            $.each(sortedClasses,function(i){
                var options = {
                    marginLeft : indentSizeInEm*i+'em',
                    marginRight: indentSizeInEm*(convoPeople-i-1)+'em'
                };
                convo.find("."+this).css(options);
            });
        });
    };
    updateContactList();
});