Tailwind Avatar component

Responsive avatar built with Tailwind CSS. Plenty of templates like a circle avatar, square, profile and many more. Download for free without registration.


Basic examples

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

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

With shadow

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

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

Square

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

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

With content

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

Avatar
John Doe

Web designer

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

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