Tailwind CSS 3 Avatars Example
Tags: css, tailwindcss, webdev, tutorial
Published: 2022-04-18 10:00:01

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](https://larainfo.com/blogs/tailwind-css-3-avatars-example)

[How to install & setup Tailwind CSS v3](https://larainfo.com/blogs/how-to-install-setup-tailwind-css-v3)

### Example 1
tailwind v3 simple avatars with no image.
```html
<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 v1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n0pcfvva1fr5sqcyq7w.png)

### Example 2
tailwind v3  avatars with image.

```html
<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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmbjr8bpv8pb3g2fq53c.png)

tailwind v3 avatars with indicator.

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

![larainfo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/357s45arnrbhamx1ykqy.png)

### Read also
[Tailwind CSS 3 FAQ Accordion UI Example](https://larainfo.com/blogs/tailwind-css-3-faq-accordion-ui-example)
[Tailwind CSS 3 Avatars Example](https://larainfo.com/blogs/tailwind-css-3-avatars-example)
[Tailwind CSS 3 Breadcrumb Example](https://larainfo.com/blogs/tailwind-css-3-breadcrumb-example)
[Tailwind CSS 3 Alert Message Example](https://larainfo.com/blogs/tailwind-css-3-alert-message-example)
[Tailwind CSS v3 Button Examples](https://larainfo.com/blogs/tailwind-css-v3-button-examples)
[Tailwind CSS v3 Cards Examples](https://larainfo.com/blogs/tailwind-css-v3-cards-examples)
[How to use dark mode toggle switch in Tailwind CSS 3](https://larainfo.com/blogs/how-to-use-dark-mode-toggle-switch-in-tailwind-css-3)
[Tailwind CSS 3 Login Page UI Example](https://larainfo.com/blogs/tailwind-css-3-login-page-ui-example)