Tailwind CSS Avatar

Use our Tailwind CSS Avatar to portray people or objects. It can be used as a visual identifier for a user profile on your website.

See below our avatar components examples.


Image placeholder
<a href="#" class="avatar">
  <img alt="Image placeholder" src="/img/face-2.jpg" />
</a>

Avatar Styles

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

Image placeholderImage placeholder
<a href="#" class="avatar">
  <img alt="Image placeholder" src="/img/face-2.jpg" />
</a>
<a href="#" class="avatar avatar-circular">
  <img alt="Image placeholder" src="/img/face-2.jpg" />
</a>

Avatar Sizes

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

Image placeholderImage placeholderImage placeholderImage placeholderImage placeholderImage placeholder
<a href="#" class="avatar avatar-circular avatar-xs">
  <img alt="Image placeholder" src="/img/face-2.jpg" />
</a>
<a href="#" class="avatar avatar-circular avatar-sm">
  <img alt="Image placeholder" src="/img/face-2.jpg" />
</a>
<a href="#" class="avatar avatar-circular avatar-md">
  <img alt="Image placeholder" src="/img/face-2.jpg" />
</a>
<a href="#" class="avatar avatar-circular avatar-lg">
  <img alt="Image placeholder" src="/img/face-2.jpg" />
</a>
<a href="#" class="avatar avatar-circular avatar-xl">
  <img alt="Image placeholder" src="/img/face-2.jpg" />
</a>
<a href="#" class="avatar avatar-circular avatar-xxl">
  <img alt="Image placeholder" src="/img/face-2.jpg" />
</a>

alert

breadcrumbs

Edit this page on Github