Tailwind CSS Simple Avatar Examples
Tags: tailwindcss, webdev, tutorial, css
Published: 2021-07-23 11:26:13

In this tutorial we will see simple avatar, rounded  avatar, border rounded  avatar , status indicator avatar , status  avatar with icon, examples with Tailwind CSS

####Tool Use

######Tailwind CSS 2.x
######Heroicons Icons
######Unsplash for image


👉 [View Demo](https://larainfo.com/blogs/tailwind-css-simple-avatar-examples)

Setup Project

Using CDN

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
```
or 

[The Easiest way to install Tailwind CSS with Tailwind CLI](https://larainfo.com/blogs/the-easiest-way-to-install-tailwind-css-with-tailwind-cli)

[How to Install Tailwind CSS with NPM](https://larainfo.com/blogs/how-to-install-tailwind-css-with-npm)

####Example 1
Simple Avatar
```html

<img class="object-cover w-16 h-16"
     src="https://images.unsplash.com/photo-1520315342629-6ea920342047?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjR8fGNhdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
     alt="Avatar" />
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2s7vutx93ninodu2bz9u.png)

####Example 2
Simple Rounded  Avatar
```html
<img class="object-cover w-16 h-16 rounded-full"
    src="https://images.unsplash.com/photo-1520315342629-6ea920342047?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjR8fGNhdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
    alt="Avatar" />
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p20ebs18qd7vdsdqub01.png)

####Example 3
Border Rounded  Avatar
```html
<img class="object-cover w-16 h-16 border-2 border-green-600 rounded-full"
     src="https://images.unsplash.com/photo-1520315342629-6ea920342047?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjR8fGNhdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
     alt="Avatar" />
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fluvai49pr505vn6u5it.png)

####Example 4
Status Indicator Avatar
```html
<div class="relative">
    <img class="object-cover w-16 h-16 rounded-full"
        src="https://images.unsplash.com/photo-1520315342629-6ea920342047?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjR8fGNhdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
        alt="Avatar" />
    <span class="absolute right-0 w-4 h-4 bg-green-600 border-2 border-white rounded-full top-2"></span>
</div>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n5he4q78l3c2o71lhsd.png)

####Example 5
Status  Avatar with Icon
```html
<div class="relative">
    <img class="object-cover w-16 h-16 rounded-full"
        src="https://images.unsplash.com/photo-1520315342629-6ea920342047?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjR8fGNhdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
        alt="Avatar" />
    <span class="absolute right-0 bottom-1"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-400"
            fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg></span>
</div>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnx7wt9nn0gnjteojtvu.png)


###See Also 👇
[Tailwind CSS Simple Responsive Image Gallery with Grid](https://larainfo.com/blogs/tailwind-css-simple-responsive-image-gallery-with-grid)
[Tailwind CSS Simple Alert Components Examples](https://larainfo.com/blogs/tailwind-css-simple-alert-components-examples)
[Tailwind CSS Simple Card Examples](https://larainfo.com/blogs/tailwind-css-simple-card-examples)
[Tailwind CSS Badge Examples](https://larainfo.com/blogs/tailwind-css-badge-examples)
[Tailwind CSS Simple Modals Examples](https://larainfo.com/blogs/tailwind-css-simple-modals-examples)