Avatar 头像

响应式头像组件。

行内 Tailwind/UnoCSS 用法

使用行内的tailwind/unocss样式构建，复制组件的代码即可使用

查看代码

<!-- Avatar -->
<a href="#" class="relative block">
  <img alt="profil" src="https://picsum.photos/id/185/50/50" class="mx-auto size-16 rounded-full object-cover shadow-sm">
</a>
<!-- Avatar end -->
<!-- Avatar with badge -->
<a href="#" class="relative block">
  <img alt="profil" src="https://picsum.photos/id/185/50/50" class="mx-auto size-16 rounded-full object-cover shadow-sm">
  <span class="absolute right-0 top-0 z-[2] my-1 size-4 rounded-full border-2 border-solid border-white bg-green-400" />
</a>
<a href="#" class="relative block">
  <img alt="profil" src="https://picsum.photos/id/185/50/50" class="mx-auto size-16 rounded-full object-cover shadow-sm">
  <span class="absolute bottom-0 right-0 z-[2] size-4 rounded-full border-2 border-solid border-white bg-green-400" />
</a>
<!-- Avatar with badge end -->