DEV Community

Cover image for Tailwind CSS Simple Avatar Examples
saim
saim

Posted on • Originally published at larainfo.com

1 1

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

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay