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.

view

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>

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 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>

Read also

Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS 3 Alert Message 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