TailwindCSSで色々な通知アイコンを作る

ワンポイント

1. 強調 特定のアクションに誘導する
2. 集約 色や件数でアクションをサマリーする

animate-pulse

<div class="flex shrink-0 items-center justify-center relative size-6">
  <div class="size-2 absolute top-0 right-0 shrink-0 bg-emerald-500 rounded-full animate-pulse" />
  <i class="ri-mail-line text-2xl"></i>
</div>

animate-ping

<div class="flex shrink-0 items-center justify-center relative size-6">
  <div class="size-2 absolute top-0 right-0 shrink-0 bg-emerald-500 rounded-full animate-ping" />
  <i class="ri-mail-line text-2xl"></i>
</div>

文字を入れる

<div class="flex shrink-0 items-center justify-center relative size-6">
  <div class="flex shrink-0 items-center justify-center text-white text-xs size-4 absolute top-[-6px] right-[-6px] bg-emerald-500 rounded-full">
    <span>10</span>
  </div>
  <i class="ri-mail-line text-2xl"></i>
</div>