Notification

Message about an event/state.

html

<div class="notif notif--mention notif--unread" role="status">
  <span class="notif__icon" aria-hidden="true"></span>
  <div class="notif__body">
    <p class="notif__title">Priya commented on your task</p>
    <p class="notif__message">&quot;Can we push the deadline to Friday?&quot;</p>
    <p class="notif__time">2m ago</p>
  </div>
  <span class="notif__dot" aria-label="Unread"></span>
</div>
<style>
.notif { display: flex; align-items: flex-start; gap: 10px; width: 300px; box-sizing: border-box; padding: 12px 14px;
  border-radius: 10px; background: #FAF7F2; border: 1px solid #24143014; font: 13.5px/1.4 system-ui, sans-serif; color: #241430; }
.notif--unread { background: #FFFFFF; box-shadow: 0 2px 10px rgba(36,20,48,.08); }
.notif__icon { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #FAF7F2; font-weight: 700; font-size: 12px; }
.notif--mention .notif__icon { background: #D9A3E0; }
.notif--mention .notif__icon::before { content: "@"; }
.notif--system .notif__icon { background: #8A6FBF; }
.notif--system .notif__icon::before { content: "⚙"; }
.notif--message .notif__icon { background: #4E9BD9; }
.notif--message .notif__icon::before { content: "✉"; }
.notif__body { flex: 1; min-width: 0; }
.notif__title { margin: 0; font-weight: 700; }
.notif__message { margin: 2px 0 0; color: #241430b3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif__time { margin: 4px 0 0; font-size: 11px; color: #24143080; }
.notif__dot { width: 8px; height: 8px; border-radius: 50%; background: #B3261E; flex-shrink: 0; margin-top: 4px; }
</style>

tailwind

<div role="status" class="notif-tw notif-tw--mention notif-tw--unread flex items-start gap-2.5 w-[300px] box-border px-3.5 py-3 rounded-lg bg-[#FAF7F2] border border-[#24143014] font-sans text-[13.5px] text-[#241430]">
  <span class="notif-tw__icon w-[26px] h-[26px] rounded-full flex-shrink-0 grid place-items-center text-[#FAF7F2] font-bold text-xs" aria-hidden="true"></span>
  <div class="flex-1 min-w-0">
    <p class="m-0 font-bold">Priya commented on your task</p>
    <p class="mt-0.5 mb-0 text-[#241430]/70 overflow-hidden text-ellipsis whitespace-nowrap">&quot;Can we push the deadline to Friday?&quot;</p>
    <p class="mt-1 mb-0 text-[11px] text-[#241430]/50">2m ago</p>
  </div>
  <span aria-label="Unread" class="w-2 h-2 rounded-full bg-[#B3261E] flex-shrink-0 mt-1"></span>
</div>
<style>
.notif-tw--unread { background: #FFFFFF; box-shadow: 0 2px 10px rgba(36,20,48,.08); }
.notif-tw--mention .notif-tw__icon { background: #D9A3E0; }
.notif-tw--mention .notif-tw__icon::before { content: "@"; }
.notif-tw--system .notif-tw__icon { background: #8A6FBF; }
.notif-tw--system .notif-tw__icon::before { content: "⚙"; }
.notif-tw--message .notif-tw__icon { background: #4E9BD9; }
.notif-tw--message .notif-tw__icon::before { content: "✉"; }
</style>

react

export function Notification({
  title = "Priya commented on your task",
  message = ""Can we push the deadline to Friday?"",
  timeAgo = "2m ago",
  category = "mention",
  unread = true,
}) {
  const palette = { mention: { c: "#D9A3E0", icon: "@" }, system: { c: "#8A6FBF", icon: "⚙" }, message: { c: "#4E9BD9", icon: "✉" } }[category] ?? { c: "#8A6FBF", icon: "⚙" };
  return (
    <div role="status" style={{ display: "flex", alignItems: "flex-start", gap: 10, width: 300, boxSizing: "border-box",
      padding: "12px 14px", borderRadius: 10, background: unread ? "#FFFFFF" : "#FAF7F2",
      boxShadow: unread ? "0 2px 10px rgba(36,20,48,.08)" : "none", border: "1px solid #24143014",
      font: "13.5px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <span aria-hidden="true" style={{ width: 26, height: 26, borderRadius: "50%", flexShrink: 0, background: palette.c,
        display: "grid", placeItems: "center", color: "#FAF7F2", fontWeight: 700, fontSize: 12 }}>{palette.icon}</span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{ margin: 0, fontWeight: 700 }}>{title}</p>
        <p style={{ margin: "2px 0 0", color: "#241430b3", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{message}</p>
        <p style={{ margin: "4px 0 0", fontSize: 11, color: "#24143080" }}>{timeAgo}</p>
      </div>
      {unread && <span aria-label="Unread" style={{ width: 8, height: 8, borderRadius: "50%", background: "#B3261E", flexShrink: 0, marginTop: 4 }} />}
    </div>
  );
}