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