Basic examples
Avatars are visual representations of people or entities and are often displayed within lists or cards.

Help us spread the word about Tailwind Elements for React (TER)
If you enjoy the project, help it grow & find more contributors by sharing it with your peers. Every share counts, thank you!
With shadow
Use .shadow
class to add a shadow to the avatar. In the
example below, we add shadow-lg
class.

Square
Use the .rounded-lg
class to make avatars squared with
rounded corners.

With content
Easily combine the avatar component with content such as a username and a short description.

John Doe
Web designer
If you are looking for more advanced options, try Bootstrap Avatar from MDBootstrap.