Avatar with Status Indicator

Tailwind CSS

Technical Specification

Circular avatar image with a green dot for online presence.

Input/Output Samples

Input:user online

Output:Avatar + green ping

Optimal Logic Path

<div class="relative w-12 h-12">
  <img src="/user.jpg" class="w-full h-full object-cover rounded-full" />
  <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></span>
</div>

Architectural Deep-Dive

Quick reusable presence indicator UI pattern.