You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailwind-ai/application_ui/elements/avatars/rounded_avatars_with_top_no...

66 lines
2.6 KiB
HTML

<span class="relative inline-block">
<img
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="size-6 rounded-md"
/>
<span
class="absolute top-0 right-0 block size-1.5 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gray-300 ring-2 ring-white"
></span>
</span>
<span class="relative inline-block">
<img
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="size-8 rounded-md"
/>
<span
class="absolute top-0 right-0 block size-2 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-red-400 ring-2 ring-white"
></span>
</span>
<span class="relative inline-block">
<img
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="size-10 rounded-md"
/>
<span
class="absolute top-0 right-0 block size-2.5 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-green-400 ring-2 ring-white"
></span>
</span>
<span class="relative inline-block">
<img
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="size-12 rounded-md"
/>
<span
class="absolute top-0 right-0 block size-3 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gray-300 ring-2 ring-white"
></span>
</span>
<span class="relative inline-block">
<img
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="size-14 rounded-md"
/>
<span
class="absolute top-0 right-0 block size-3.5 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-red-400 ring-2 ring-white"
></span>
</span>
<span class="relative inline-block">
<img
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="size-16 rounded-md"
/>
<span
class="absolute top-0 right-0 block size-4 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-green-400 ring-2 ring-white"
></span>
</span>