Chat Bubble

How to use 
<div class="ar-chat">
  <div class="ar-chat-start ar-chat-sender">
    <div class="ar-chat-avatar">A</div>
    <div>
      <div class="ar-chat-header">Alice · 10:30 AM</div>
      <div class="ar-chat-bubble">Hey!</div>
    </div>
  </div>
</div>

Other side: ar-chat-end ar-chat-receiver · optional ar-chat-footer ("Delivered")

A
Alice · 10:30 AM
Hey! How's the new framework going?
B
Bob · 10:32 AM
Going great! Just added toast notifications and rating components.
Delivered
A
Nice! Can't wait to see it in action.