DEV Community 👩‍💻👨‍💻

Cover image for Tailwind CSS Simple Avatar Examples
larainfo
larainfo

Posted on • Originally published at larainfo.com

Tailwind CSS Simple Avatar Examples

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

or

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

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

See Also 👇

Tailwind CSS Simple Responsive Image Gallery with Grid
Tailwind CSS Simple Alert Components Examples
Tailwind CSS Simple Card Examples
Tailwind CSS Badge Examples
Tailwind CSS Simple Modals Examples

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.