← All elements
<div class="cb"><p class="in">Did you push the fix?</p><p class="out">Just now. Check the preview.</p><p class="in">Perfect, thanks!</p></div>About this layout
A message thread with left and right bubbles, tails built from pseudo-elements and a seen tick.
How it works
Incoming and outgoing messages use align-self to sit left or right, with one corner squared off to suggest a tail. A tiny double tick is placed under the last outgoing message with a pseudo-element.
Ways to customise it
- Change the outgoing bubble colour.
- Add timestamps below each message.
- Add a typing indicator at the end.
Good to know
Use a list or log role in a real chat so screen readers announce messages. Colour contrast of the white on blue passes the AA level.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.