Tailwind CSS Avatars

Use responsive avatar component with helper examples for avatar dropdown, avatar image, avatar shadow & more. Free download, open-source license.

Basic examples

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

HTML

        
            
      <img
        src="https://tecdn.b-cdn.net/img/new/avatars/2.webp"
        class="w-32 rounded-full"
        alt="Avatar" />

Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

With shadow

Use .shadow class to add a shadow to the avatar. In the example below, we add shadow-lg class.

HTML

        
            
        <img
          src="https://mdbcdn.b-cdn.net/img/new/avatars/1.webp"
          class="w-32 rounded-full shadow-lg"
          alt="Avatar" />

Square

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

HTML

        
            
        <img
          src="https://tecdn.b-cdn.net/img/new/avatars/1.webp"
          class="w-32 rounded-lg shadow-lg"
          alt="Avatar" />

With content

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

John Doe

Web designer

HTML

        
            
      <div class="text-center">
        <img
          src="https://tecdn.b-cdn.net/img/new/avatars/5.webp"
          class="mx-auto mb-4 w-32 rounded-lg"
          alt="Avatar" />
        <h5 class="mb-2 text-xl font-medium leading-tight">John Doe</h5>
        <p class="text-neutral-500 dark:text-neutral-400">Web designer</p>
      </div>

Avatars

Basic examples

With shadow

Square

With content

John Doe

Related resources

Tutorials:

Extended Docs:

Design System (Figma):