Avatar

<div class="flex flex-row flex-wrap items-center gap-12">
    <twig:Avatar>
        <twig:Avatar:Image src="https://avatars.githubusercontent.com/u/47313?v=4" alt="Fabien Potencier" />
    </twig:Avatar>

    <twig:Avatar class="rounded-lg">
        <twig:Avatar:Image src="https://avatars.githubusercontent.com/u/47313?v=4" alt="Fabien Potencier" />
    </twig:Avatar>

    <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2">
        <twig:Avatar>
            <twig:Avatar:Text class="bg-red-200">A</twig:Avatar:Text>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Text class="bg-red-300">B</twig:Avatar:Text>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Text class="bg-red-400">C</twig:Avatar:Text>
        </twig:Avatar>
    </div>
</div>

composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0

<span
    class="{{ 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ' ~ attributes.render('class')|tailwind_merge }}"
    data-slot="avatar"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</span>

<img
    class="{{ 'aspect-square h-full w-full ' ~ attributes.render('class')|tailwind_merge }}"
    data-slot="avatar-image"
    {{ attributes.defaults({alt: ''}) }}
/>

<span
    class="{{ 'flex h-full w-full items-center justify-center rounded-full bg-muted ' ~ attributes.render('class')|tailwind_merge }}"
    data-slot="avatar-text"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</span>