Tailwind CSS Avatar - Taco Tall Stack

The Avatar is used to portray people or objects on web projects - a visual identifier for a user profile. Below we are presenting a dynamic example of the Avatar component that you can use in your project.

Image placeholder 

<x-avatar size="h-12 w-12" class="!rounded-lg" href="#" src="https://docs.material-tailwind.com/img/face-2.jpg" alt="Image placeholder" />

Avatar Styles

Use the following example to create rounded and circular avatar components for you Tailwind CSS project.

Image placeholder Image placeholder 

<x-avatar size="h-12 w-12" class="!rounded-lg mr-2" href="#" src="https://docs.material-tailwind.com/img/face-2.jpg" alt="Image placeholder" />
<x-avatar size="h-12 w-12" class="!rounded-full mr-2" href="#" src="https://docs.material-tailwind.com/img/face-2.jpg" alt="Image placeholder" />

Avatar Sizes

Use the following example to create avatars with different sizes, from small sized to large sized.

Image placeholder Image placeholder Image placeholder Image placeholder Image placeholder Image placeholder 

<x-avatar size="h-6 w-6" class="!rounded-md mr-2" href="#" src="https://docs.material-tailwind.com/img/face-2.jpg" alt="Image placeholder" />
<x-avatar size="h-9 w-9" class="!rounded-md mr-2" href="#" src="https://docs.material-tailwind.com/img/face-2.jpg" alt="Image placeholder" />
<x-avatar size="h-12 w-12" class="!rounded-lg mr-2" href="#" src="https://docs.material-tailwind.com/img/face-2.jpg" alt="Image placeholder" />
<x-avatar size="h-16 w-16" class="!rounded-lg mr-2" href="#" src="https://docs.material-tailwind.com/img/face-2.jpg" alt="Image placeholder" />
<x-avatar size="h-20 w-20" class="!rounded-xl mr-2" href="#" src="https://docs.material-tailwind.com/img/face-2.jpg" alt="Image placeholder" />
<x-avatar size="h-24 w-24" class="!rounded-2xl mr-2" href="#" src="https://docs.material-tailwind.com/img/face-2.jpg" alt="Image placeholder" />

alert

breadcrumbs