Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 23, 2021 11:26 am GMT

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

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

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

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

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>

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>

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


Original Link: https://dev.to/larainfo/tailwind-css-simple-avatar-examples-36hd

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To