JSFiddle - React, Tailwind, and code Playground

HTML

<div class="conversation">
    <blockquote class="p1" cite="Phrogz">Hello, there?</blockquote>
    <blockquote class="p2" cite="George">Yeah, 'sup?</blockquote>
    <blockquote class="p1" cite="Phrogz">Bored on s/o</blockquote>
    <blockquote class="p3" cite="Alon">Can you help me?</blockquote>
    <blockquote class="p1" cite="Phrogz">Uh, sure.</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]:before { content:attr(cite); font-weight:bold; color:rgba(0,0,0,0.5); padding-right:0.4em }
.conversation .p1 { background:#6cf; margin-right:4em }
.conversation .p2 { background:#f93; margin-left:2em; margin-right:2em }
.conversation .p3 { background:#6c3; margin-left:4em }