Avatar

UI Components/Avatar

Circular Avatar

index.html

<div
  class="flex flex-col space-y-2 md:flex-row md:space-x-6 md:space-y-0 justify-center items-center h-screen"
>
  <img
    class="inline-block h-6 w-6 rounded-full"
    src="https://toolmate.co.in/assets/tmui/userone.jpeg"
    alt="User One"
  />
  <img
    class="inline-block h-8 w-8 rounded-full"
    src="https://toolmate.co.in/assets/tmui/userone.jpeg"
    alt="User One"
  />
  <img
    class="inline-block h-10 w-10 rounded-full"
    src="https://toolmate.co.in/assets/tmui/userone.jpeg"
    alt="User One"
  />
  <img
    class="inline-block h-12 w-12 rounded-full"
    src="https://toolmate.co.in/assets/tmui/userone.jpeg"
    alt="User One"
  />
  <img
    class="inline-block h-14 w-14 rounded-full"
    src="https://toolmate.co.in/assets/tmui/userone.jpeg"
    alt="User One"
  />
</div>

Rounded Avatar

index.html

<div
  class="flex flex-col space-y-2 md:flex-row md:space-x-6 md:space-y-0 justify-center items-center h-screen"
>
  <img
    class="inline-block h-6 w-6 rounded-md"
    src="https://toolmate.co.in/assets/tmui/usertwo.jpeg"
    alt="User One"
  />
  <img
    class="inline-block h-8 w-8 rounded-md"
    src="https://toolmate.co.in/assets/tmui/usertwo.jpeg"
    alt="User One"
  />
  <img
    class="inline-block h-10 w-10 rounded-md"
    src="https://toolmate.co.in/assets/tmui/usertwo.jpeg"
    alt="User One"
  />
  <img
    class="inline-block h-12 w-12 rounded-md"
    src="https://toolmate.co.in/assets/tmui/usertwo.jpeg"
    alt="User One"
  />
  <img
    class="inline-block h-14 w-14 rounded-md"
    src="https://toolmate.co.in/assets/tmui/usertwo.jpeg"
    alt="User One"
  />
</div>

Circular Avatar with Notification

index.html

<div
  class="flex flex-col space-y-2 md:flex-row md:space-x-6 md:space-y-0 justify-center items-center h-screen"
>
  <span class="relative inline-block">
    <img
      class="h-6 w-6 rounded-full"
      src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
      alt="User Three"
    />
    <span
      class="absolute bottom-0 right-0 block h-1.5 w-1.5 rounded-full bg-green-600 ring-2 ring-white"
    ></span>
  </span>

  <span class="relative inline-block">
    <img
      class="h-8 w-8 rounded-full"
      src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
      alt="User Three"
    />
    <span
      class="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-600 ring-2 ring-white"
    ></span>
  </span>

  <span class="relative inline-block">
    <img
      class="h-10 w-10 rounded-full"
      src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
      alt="User Three"
    />
    <span
      class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-600 ring-2 ring-white"
    ></span>
  </span>

  <span class="relative inline-block">
    <img
      class="h-12 w-12 rounded-full"
      src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
      alt="User Three"
    />
    <span
      class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-600 ring-2 ring-white"
    ></span>
  </span>

  <span class="relative inline-block">
    <img
      class="h-14 w-14 rounded-full"
      src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
      alt="User Three"
    />
    <span
      class="absolute bottom-0 right-0 block h-3.5 w-3.5 rounded-full bg-green-600 ring-2 ring-white"
    ></span>
  </span>
</div>

Rounded Avatar with Notification

index.html

<div
  class="flex flex-col space-y-2 md:flex-row md:space-x-6 md:space-y-0 justify-center items-center h-screen"
>
  <span class="relative inline-block">
    <img
      class="h-6 w-6 rounded-md"
      src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
      alt="User Three"
    />
    <span
      class="absolute bottom-0 right-0 block h-1.5 w-1.5 rounded-full bg-green-600 ring-2 ring-white"
    ></span>
  </span>

  <span class="relative inline-block">
    <img
      class="h-8 w-8 rounded-md"
      src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
      alt="User Three"
    />
    <span
      class="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-600 ring-2 ring-white"
    ></span>
  </span>

  <span class="relative inline-block">
    <img
      class="h-10 w-10 rounded-md"
      src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
      alt="User Three"
    />
    <span
      class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-600 ring-2 ring-white"
    ></span>
  </span>

  <span class="relative inline-block">
    <img
      class="h-12 w-12 rounded-md"
      src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
      alt="User Three"
    />
    <span
      class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-600 ring-2 ring-white"
    ></span>
  </span>

  <span class="relative inline-block">
    <img
      class="h-14 w-14 rounded-md"
      src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
      alt="User Three"
    />
    <span
      class="absolute bottom-0 right-0 block h-3.5 w-3.5 rounded-full bg-green-600 ring-2 ring-white"
    ></span>
  </span>
</div>

Circular Avatar Stack

index.html

<div class="isolate flex -space-x-2">
  <img
    class="relative z-30 inline-block h-10 w-10 rounded-full ring-2 ring-white"
    src="https://toolmate.co.in/assets/tmui/userone.jpeg"
    alt="User One"
  />
  <img
    class="relative z-20 inline-block h-10 w-10 rounded-full ring-2 ring-white"
    src="https://toolmate.co.in/assets/tmui/usertwo.jpeg"
    alt="User Two"
  />
  <img
    class="relative z-10 inline-block h-10 w-10 rounded-full ring-2 ring-white"
    src="https://toolmate.co.in/assets/tmui/userthree.jpeg"
    alt="User Three"
  />
  <img
    class="relative z-0 inline-block h-10 w-10 rounded-full ring-2 ring-white"
    src="https://toolmate.co.in/assets/tmui/userfour.jpeg"
    alt="User Four"
  />
</div>

Circular Avatar with Text

index.html

<div class="flex items-center space-x-2">
  <img
    class="inline-block h-12 w-12 rounded-full"
    src="https://toolmate.co.in/assets/tmui/userfour.jpeg"
    alt="User Four"
  />
  <span class="flex flex-col">
    <span class="text-sm font-medium text-gray-900">User Name</span>
    <span class="text-sm font-medium text-gray-500">@username</span>
  </span>
</div>

Rounded Avatar with Text

<div class="flex items-center space-x-2">
  <img
    class="inline-block h-12 w-12 rounded-md"
    src="https://toolmate.co.in/assets/tmui/userfour.jpeg"
    alt="User Four"
  />
  <span class="flex flex-col">
    <span class="text-sm font-medium text-gray-900">User Name</span>
    <span class="text-sm font-medium text-gray-500">@username</span>
  </span>
</div>

PreviousAlert NextBadge

Last updated 5 months ago

Was this helpful?