DEV Community 👩‍💻👨‍💻

Cover image for Tailwind CSS 3 Avatars Example
larainfo
larainfo

Posted on • Originally published at larainfo.com

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>
Enter fullscreen mode Exit fullscreen mode

tailwind v3 avatars v1

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>
Enter fullscreen mode Exit fullscreen mode

tailwind v3 avatars

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>
Enter fullscreen mode Exit fullscreen mode

larainfo

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

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.