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

Setup Project

Using CDN

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

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM

Example 1

Simple Avatar


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

Example 2

Simple Rounded Avatar

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

Example 3

Border Rounded Avatar

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

Example 4

Status Indicator Avatar

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

Example 5

Status Avatar with Icon

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

Tailwind CSS Simple Avatar Examples