<div class="mb-10">
    <h1 class="mb-4 text-xl font-medium">Avatars</h1>
    <div class="bg-gray-200/60 p-4 lg:p-4 lg:p-10">
        <div class="flex flex-wrap items-center gap-3 mb-4">
            <x-dashui-avatar size="xs"/>
            <x-dashui-avatar size="sm"/>
            <x-dashui-avatar/>
            <x-dashui-avatar size="lg"/>
            <x-dashui-avatar size="xl"/>
        </div>
        <div class="flex flex-wrap items-center gap-3 mb-4">
            <x-dashui-avatar initials="ww" size="xs"/>
            <x-dashui-avatar initials="az" size="sm" class="bg-amber-500"/>
            <x-dashui-avatar initials="fg" class="bg-red-300"/>
            <x-dashui-avatar initials="sd" size="lg" class="bg-sky-600"/>
            <x-dashui-avatar initials="ho" size="xl" class="bg-rose-400"/>
        </div>
        <div class="flex flex-wrap items-center gap-3">
            <x-dashui-avatar size="xs" 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"/>
            <x-dashui-avatar size="sm" 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"/>
            <x-dashui-avatar 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"/>
            <x-dashui-avatar size="lg" 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"/>
            <x-dashui-avatar size="xl" 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"/>
        </div>
    </div>
</div>
