Source: https://tailwindcss.com/plus/ui-blocks/application-ui/elements/avatars

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Application Shells

  • Stacked Layouts

  • Sidebar Layouts

  • Multi-Column Layouts

• Headings

  • Page Headings

  • Card Headings

  • Section Headings

• Data Display

  • Description Lists

  • Stats

  • Calendars

• Lists

  • Stacked Lists

  • Tables

  • Grid Lists

  • Feeds

• Forms

  • Form Layouts

  • Input Groups

  • Select Menus

  • Sign-in and Registration

  • Textareas

  • Radio Groups

  • Checkboxes

  • Toggles

  • Action Panels

  • Comboboxes

• Feedback

  • Alerts

  • Empty States

• Navigation

  • Navbars

  • Pagination

  • Tabs

  • Vertical Navigation

  • Sidebar Navigation

  • Breadcrumbs

  • Progress Bars

  • Command Palettes

• Overlays

  • Modal Dialogs

  • Drawers

  • Notifications

• Elements

  • Avatars

  • Badges

  • Dropdowns

  • Buttons

  • Button Groups

• Layout

  • Containers

  • Cards

  • List containers

  • Media Objects

  • Dividers

• Page Examples

  • Home Screens

  • Detail Screens

  • Settings Screens

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Avatars

Use these Tailwind CSS avatar components to display user profile pictures and company logos individually or grouped in stacks. These components are designed and built by the Tailwind CSS team, and include a variety of different styles.

Avatar group stacked bottom to top

---

PreviewCode

HTMLReactVue

Avatar group stacked bottom to top

---

PreviewCode

HTMLReactVue

Circular avatars

---

Preview

Get the code →

Circular avatars

---

Preview

Get the code →

Rounded avatars

---

Preview

Get the code →

Rounded avatars

---

Preview

Get the code →

Circular avatars with top notification

---

Preview

Get the code →

Circular avatars with top notification

---

Preview

Get the code →

Rounded avatars with top notification

---

Preview

Get the code →

Rounded avatars with top notification

---

Preview

Get the code →

Circular avatars with bottom notification

---

Preview

Get the code →

Circular avatars with bottom notification

---

Preview

Get the code →

Rounded avatars with bottom notification

---

Preview

Get the code →

Rounded avatars with bottom notification

---

Preview

Get the code →

Circular avatars with placeholder icon

---

Preview

Get the code →

Circular avatars with placeholder icon

---

Preview

Get the code →

Circular avatars with placeholder initials

---

Preview

Get the code →

Circular avatars with placeholder initials

---

Preview

Get the code →

Avatar group stacked top to bottom

---

Preview

Get the code →

Avatar group stacked top to bottom

---

Preview

Get the code →

With text

---

Preview

Get the code →

With text

---

Preview

Get the code →