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.
<a href="#" class="avatar">
<img alt="Image placeholder" src="/img/face-2.jpg" />
</a>
Use the following example to create rounded and circular avatar components for you Tailwind CSS project.
<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>
Use the following example to create avatars with different sizes, from small sized to large sized.
<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>