Tailwind CSS React Avatars - Free Examples & Tutorial

Use responsive avatar component with helper examples for avatar dropdown, avatar image, avatar shadow & more.

Basic examples

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

        
            
      import React from 'react';

      export default function App() {
        return (
          <img
          src="https://tecdn.b-cdn.net/img/new/avatars/2.webp"
          className="w-32 rounded-full"
          alt="Avatar" />
        );
      }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow 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.

        
            
        import React from 'react';

        export default function App() {
          return (
            <img
            src="https://mdbcdn.b-cdn.net/img/new/avatars/1.webp"
            className="w-32 rounded-full shadow-lg"
            alt="Avatar" />
          );
        }

Square

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

        
            
        import React from 'react';

        export default function App() {
          return (
            <img
            src="https://tecdn.b-cdn.net/img/new/avatars/1.webp"
            className="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

        
            
      import React from 'react';

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

If you are looking for more advanced options, try Bootstrap Avatar from MDBootstrap.

Avatars

Tailwind CSS ReactAvatars

Basic examples

With shadow

Square

With content

John Doe

Related resources