1. Components
  2. Avatar

Components

Tailwind CSS Avatar

Examples for opting different size of image sizes.

Shape

Circular avatars

Use the .rounded-full utility class to make avatars circular.

Image Description Image Description Image Description Image Description

Rounded avatars

Use the border radius utility classes to make avatars more rounded.

Image Description Image Description Image Description Image Description

Status

Circular avatars with top status

Circular avatars with all kinds of status indicators.

Image Description
Image Description
Image Description
Image Description

Rounded avatars with top status

Rounded avatars with all kinds of status indicators.

Image Description
Image Description
Image Description
Image Description

Circular avatars with bottom status

Circular avatars with all kinds of status indicators.

Image Description
Image Description
Image Description
Image Description

Rounded avatars with bottom status

Rounded avatars with all kinds of status indicators.

Image Description
Image Description
Image Description
Image Description

Placeholder

Placeholder icon

Circular avatars with placeholder icon.

Placeholder initials

Circular avatars with placeholder initials.

AC AC AC AC

Displaying a tooltip

A tooltip can be used with an avatar to be displayed on focus or hover.

Media

Circular avatar with text.

Image Description

Maria Wanner

maria@gmail.com