nhóm avatar chồng chéo
Giao diện người dùng hình đại diện với nhiều biểu tượng người dùng xếp chồng lên nhau và huy hiệu cho biết số người còn lại.
Tailwind CSS
Một nhóm các hình đại diện hơi chồng chéo nhau thường được sử dụng để thể hiện những thứ như “những người tham gia dự án này” và “những người dùng thích nó”.
Xem trước
Mã triển khai (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>