SnippetUI

重叠头像组

Avatar UI 过去曾使用过许多标志,从那时起,它就或多或少地被用作人类标志。

Tailwind CSS

一组稍微重叠的头像,通常用于表达“该项目的参与者”和“喜欢该项目的用户”等内容。

预览

实现代码(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>