In-app Notification

Notification shown inside the application.

html

<div class='iapn iapn--info' style='border-left-color:#BFD9F2;' role='status'>
  <span class='iapn__icon' style='background:#BFD9F2;' aria-hidden='true'></span>
  <div class='iapn__body'>
    <p class='iapn__message'>New comment on your design file</p>
    <time class='iapn__time' datetime='2026-08-18T09:05:00'>2026-08-18T09:05:00</time>
  </div>
  <button class='iapn__close' type='button' aria-label='Dismiss notification'>&times;</button>
</div>
<style>
.iapn { display: flex; align-items: flex-start; gap: 10px; max-width: 400px; padding: 12px 14px; background: #FAF7F2; color: #241430; border-left: 4px solid; border-radius: 10px; box-shadow: 0 6px 18px rgba(36,20,48,.12); font: 14px/1.4 system-ui, sans-serif; box-sizing: border-box; }
.iapn__icon { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; position: relative; }
.iapn__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; }
.iapn--info .iapn__icon::before { content: 'i'; }
.iapn--success .iapn__icon::before { content: '\2713'; }
.iapn--warning .iapn__icon::before { content: '!'; }
.iapn__body { flex: 1; }
.iapn__message { margin: 0 0 2px; }
.iapn__time { display: block; font-size: 11px; color: #24143080; }
.iapn__close { border: none; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: #241430; padding: 0; }
.iapn__close:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.iapn__close:hover { color: #b0273e; }
</style>

tailwind

<div role='status' class='iapn-tw iapn-tw--info flex items-start gap-2.5 max-w-[400px] p-3 bg-[#FAF7F2] text-[#241430] rounded-lg shadow-md text-sm border-l-4 box-border' style='border-left-color:#BFD9F2'>
  <span class='iapn-tw__icon w-[18px] h-[18px] rounded-full flex-shrink-0 mt-0.5 relative' style='background:#BFD9F2' aria-hidden='true'></span>
  <div class='flex-1'>
    <p class='m-0 mb-0.5'>New comment on your design file</p>
    <time class='block text-[11px] text-[#241430]/50' datetime='2026-08-18T09:05:00'>2026-08-18T09:05:00</time>
  </div>
  <button type='button' aria-label='Dismiss notification' class='border-0 bg-transparent text-base leading-none cursor-pointer p-0'>&times;</button>
</div>
<style>
.iapn-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; content: ''; }
.iapn-tw--info .iapn-tw__icon::before { content: 'i'; }
.iapn-tw--success .iapn-tw__icon::before { content: '\2713'; }
.iapn-tw--warning .iapn-tw__icon::before { content: '!'; }
</style>

react

export function InAppNotification({
  message = 'New comment on your design file',
  kind = 'info',
  accent = '#BFD9F2',
  timestamp = '2026-08-18T09:05:00',
  dismissible = true,
}) {
  const icon = { info: 'i', success: '\u2713', warning: '!' }[kind] ?? 'i';
  return (
    <div role='status' style={{ display: 'flex', alignItems: 'flex-start', gap: 10, maxWidth: 400, padding: '12px 14px', background: '#FAF7F2', color: '#241430', borderLeft: `4px solid ${accent}`, borderRadius: 10, boxShadow: '0 6px 18px rgba(36,20,48,.12)', fontFamily: 'system-ui, sans-serif', fontSize: 14 }}>
      <span aria-hidden='true' style={{ width: 18, height: 18, borderRadius: '50%', background: accent, flexShrink: 0, marginTop: 2, display: 'grid', placeItems: 'center', color: '#FAF7F2', fontSize: 11, fontWeight: 700 }}>{icon}</span>
      <div style={{ flex: 1 }}>
        <p style={{ margin: '0 0 2px' }}>{message}</p>
        <time style={{ display: 'block', fontSize: 11, color: '#24143080' }} dateTime={timestamp}>{timestamp}</time>
      </div>
      {dismissible && (
        <button type='button' aria-label='Dismiss notification' style={{ border: 'none', background: 'transparent', fontSize: 16, cursor: 'pointer', padding: 0 }}>&times;</button>
      )}
    </div>
  );
}