JSFiddle - React, Tailwind, and code Playground

HTML

<div class=chatbubble>
<p>this is a bubble</p>
</div>
<div class=chatbubble>
<p>this is a bubble</p>
</div>
<div class=chatbubble>
<p>this is a bubble</p>
</div>
<div class=chatbubble>
<p>this is a bubble</p>
</div>

CSS

body {
    width: 300px;
    font-family: Verdana, Arial;
    margin: auto;
}
.chatbubble {
    padding: 10px;
    background: #333;
    color: #eee;
    position: relative;
}
.chatbubble:after {
    position: absolute;
    content: '';
    border: 10px solid transparent;
    border-top-color: #333;
    margin-top: 10px;
}
.chatbubble:nth-of-type( n+1 ) {
    margin-top: 15px;
}
.chatbubble:nth-of-type(even) {
    background: #369;
}
.chatbubble:nth-of-type(even):after {
    right:10px;
    border-top-color: #369;
}