Tailwind CSS 3 Avatars Example

In this section we will create avatars with tailwind css 3. We will create rounded, circle avatar, avatar with online indicator with Tailwind CSS 3.

How to install & setup Tailwind CSS v3


Example 1

tailwind v3 simple avatars with no image.

<div class="flex items-center justify-center w-12 h-12 font-bold text-blue-800 bg-blue-100 rounded select-none">
    A
</div>
<div class="flex items-center justify-center w-12 h-12 font-bold text-purple-800 bg-purple-100 select-none rounded-2xl">
    B
</div>
<div class="flex items-center justify-center w-12 h-12 font-bold rounded-full select-none text-cyan-800 bg-cyan-100">
    C
</div>
tailwind v3 Avatars

tailwind v3 Avatars

Example 2

tailwind v3 avatars with image.


<div class="relative flex items-center justify-center w-16 h-16 select-none">
    <img class="object-cover object-center w-full h-full rounded"
        src="https://cdn.pixabay.com/photo/2016/04/01/11/25/avatar-1300331__340.png">
</div>
<div class="relative flex items-center justify-center w-16 h-16 rounded-full select-none">
    <img class="object-cover object-center w-full h-full rounded-full"
        src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375__340.png">
</div>
tailwind v3 avatar

tailwind v3 avatar


tailwind v3 avatars with indicator.

<div class="relative flex items-center justify-center w-16 h-16 rounded-full select-none">
    <img class="object-cover object-center w-full h-full rounded-full"
        src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375__340.png">
    <span aria-hidden="true" class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full ring ring-white"></span>
</div>
<div class="relative flex items-center justify-center w-16 h-16 rounded-full select-none">
    <img class="object-cover object-center w-full h-full rounded-full"
        src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375__340.png">
    <span aria-hidden="true" class="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full ring ring-white"></span>
</div>
<div class="relative flex items-center justify-center w-16 h-16 rounded-full select-none">
    <img class="object-cover object-center w-full h-full rounded-full"
        src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375__340.png">
    <span aria-hidden="true" class="absolute bottom-0 left-0 w-3 h-3 bg-green-500 rounded-full ring ring-white"></span>
</div>
tailwind online avatar

tailwind online avatar


Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS v3 Button Examples

Tailwind CSS v3 Cards Examples

How to use dark mode toggle switch in Tailwind CSS 3

Tailwind CSS 3 Login Page UI Example