JSFiddle - React, Tailwind, and code Playground
HTML
<div class="bubbleleft">
I say something
</div>
<div class="bubbleright">
So does he
</div>
CSS
.bubbleright{
position:relative;
padding: 10px;
background: #ddd;
margin: 5px 5px;
max-width: 250px;
left: 50px;
}
.bubbleright:after{
position:absolute;
content: "";
top:15px;right:-10px;
border-width: 10px 0 10px 15px;
border-color: transparent #ddd;
border-style: solid;
}
.bubbleleft{
position:relative;
left: 15px;
padding: 10px;
background: #aaa;
margin: 5px 5px;
max-width: 250px;
}
.bubbleleft:before{
position:absolute;
content: "";
top:15px;left:-10px;
border-width: 10px 15px 10px 0px;
border-color: transparent #aaa;
border-style: solid;
}