Chat Bubble

Individual chat message.

html

<div class="chat-bubble chat-bubble--them" style="--accent:#BFD9F2;">
  <span class="chat-bubble__avatar" style="background:#BFD9F2;" aria-hidden="true">PS</span>
  <div class="chat-bubble__content">
    <p class="chat-bubble__text">Meeting moved to 3pm — does that still work for you?</p>
    <time class="chat-bubble__time" datetime="2026-08-18T10:42">10:42 AM</time>
  </div>
</div>
<style>
.chat-bubble { display: flex; gap: 10px; max-width: 320px; font: 14px/1.4 system-ui, sans-serif; color: #241430; align-items: flex-end; }
.chat-bubble--me { flex-direction: row-reverse; margin-left: auto; }
.chat-bubble__avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #FAF7F2; font: 700 12px/1 system-ui, sans-serif; }
.chat-bubble__content { background: #FAF7F2; border: 1px solid #24143020; border-radius: 14px; padding: 10px 14px; }
.chat-bubble--me .chat-bubble__content { background: var(--accent); border-color: transparent; }
.chat-bubble__text { margin: 0 0 4px; }
.chat-bubble__time { display: block; font-size: 11px; color: #24143080; }
.chat-bubble--me .chat-bubble__time { color: #241430b0; }
</style>

tailwind

<div class="chat-bubble-tw chat-bubble-tw--them flex gap-2.5 max-w-xs items-end font-sans text-sm text-[#241430]">
  <span class="w-8 h-8 rounded-full flex-shrink-0 grid place-items-center text-[#FAF7F2] text-xs font-bold" style="background:#BFD9F2" aria-hidden="true">PS</span>
  <div class="chat-bubble-tw__content bg-[#FAF7F2] border border-[#24143020] rounded-2xl px-3.5 py-2.5" style="--accent:#BFD9F2">
    <p class="m-0 mb-1">Meeting moved to 3pm — does that still work for you?</p>
    <time class="block text-[11px] text-[#241430]/50" datetime="2026-08-18T10:42">10:42 AM</time>
  </div>
</div>
<style>
.chat-bubble-tw--me { flex-direction: row-reverse; margin-left: auto; }
.chat-bubble-tw--me .chat-bubble-tw__content { background: var(--accent); border-color: transparent; }
</style>

react

export function ChatBubble({
  message = "Meeting moved to 3pm — does that still work for you?",
  sender = "them",
  initials = "PS",
  timestamp = "10:42 AM",
  accent = "#BFD9F2",
}) {
  const mine = sender === "me";
  return (
    <div style={{ display: "flex", gap: 10, maxWidth: 320, alignItems: "flex-end", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430",
      flexDirection: mine ? "row-reverse" : "row", marginLeft: mine ? "auto" : 0 }}>
      <span style={{ width: 32, height: 32, borderRadius: "50%", flexShrink: 0, display: "grid", placeItems: "center", background: accent, color: "#FAF7F2", fontSize: 12, fontWeight: 700 }} aria-hidden="true">{initials}</span>
      <div style={{ background: mine ? accent : "#FAF7F2", border: mine ? "1px solid transparent" : "1px solid #24143020", borderRadius: 14, padding: "10px 14px" }}>
        <p style={{ margin: "0 0 4px" }}>{message}</p>
        <time style={{ display: "block", fontSize: 11, color: mine ? "#241430b0" : "#24143080" }} dateTime="2026-08-18T10:42">{timestamp}</time>
      </div>
    </div>
  );
}