オーバーラッピングアバターグループ
複数のユーザーアイコンを重ねて表示し、残りの人数を示すバッジを備えたアバターUI。
Tailwind CSS
「このプロジェクトの参加者」「いいねしたユーザー」などの表現でよく使われる、少しずつ重なり合ったアバターのグループです。
プレビュー (Preview)
実装コード (Implementation)
<div class="flex -space-x-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-zinc-900" src="https://i.pravatar.cc/150?img=1" alt="User 1" />
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-zinc-900" src="https://i.pravatar.cc/150?img=2" alt="User 2" />
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-zinc-900" src="https://i.pravatar.cc/150?img=3" alt="User 3" />
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-zinc-900" src="https://i.pravatar.cc/150?img=4" alt="User 4" />
<a class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-zinc-900" href="#">+99</a>
</div>