Tailwind CSS React Avatar - Horizon UI

Use our Tailwind CSS React Avatar to portray people or objects. It can be used as a visual identifier for a user profile on your website.

See below our avatar components examples.

Avatar Variants

Use the following example to create rounded and circular avatar components for you Tailwind CSS React project.

Avatar Sizes

Use the following example to create avatars with different sizes, from small sized to large sized.

<img
  src="assets/img/avatars/avatar4.png"
  className="h-12 w-12 rounded-full"
  alt="avatar"
/>
<img
  src="assets/img/avatars/avatar4.png"
  className="h-14 w-14 rounded-full"
  alt="avatar"
/>
<img
  src="assets/img/avatars/avatar4.png"
  className="h-16 w-16 rounded-full"
  alt="avatar"
/>
<img
  src="assets/img/avatars/avatar4.png"
  className="h-20 w-20 rounded-full"
  alt="avatar"
/>
<img
  src="assets/img/avatars/avatar4.png"
  className="h-24 w-24 rounded-full"
  alt="avatar"
/>
<img
  src="assets/img/avatars/avatar4.png"
  className="h-28 w-28 rounded-full"
  alt="avatar"
/>

alert

breadcrumbs