перекрывающиеся группы аватаров
Пользовательский интерфейс аватара с несколькими значками пользователей, расположенными друг над другом, и значком, показывающим, сколько человек осталось.
Tailwind CSS
Группа слегка перекрывающихся аватаров, которая часто используется для обозначения таких вещей, как «участники этого проекта» и «пользователи, которым он понравился».
Предварительный просмотр
Код реализации (Реализация)
<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>