Tailwind CSS React Avatars - Free Examples & Tutorial

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.

        
            
      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" />
        );
      }

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!

Share via Reddit

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