User Avatars

Related Examples

• 
  Avatar with Gradient Shadow

  Author:
  Prajwal Hallale

  1 year ago

  9.7k
• 
  Avatar with activity indicator

  online indicator pulse animation

  Author:
  Prashant

  2 years ago

  8.9k
• 
  Product rating section

  display star rating stats with user avatars

  Author:
  Erik Hyatt

  1 year ago

  10.3k
• 
  User Avatar

  Rounded user avatar component

  Author:
  Krishna Gudpalle

  2 years ago

  9k
• 
  Avatar

  This Avatar component includes: 1. Responsive design using Tailwind CSS classes 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User avatar with hover effect and online status indicator 5. User name and role 6. Follow button with hover effect 7. Follower count 8. Subtle animations and transitions 9. Accessibility considerations (proper contrast, focus states) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The avatar card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - The avatar image has a border color that changes in dark mode - The avatar has a scale effect on hover and a ring appears around it - The Follow button uses Indigo-800 with a Blue-900 hover state - The card has a shadow effect that changes color on hover - Dark mode is automatically applied based on system preferences - The entire card has a subtle transition effect for smooth color changes - Proper focus states are implemented for the button This design provides a clean, interactive avatar component while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

  Author:
  nejaa badr

  1 month ago

  436
• 
  canvas fully covers

  canvas fully covers

  Author:
  ABDESLAMI ACHRAF

  2 weeks ago

  315
• 
  Basic user avatar box with text

  Author:
  Shakti

  1 year ago

  9.3k
• 
  Avatar Initial placeholder

  Author:
  Mr Robot

  2 years ago

  9.6k
• 
  Avatar

  Avatar

  Author:
  Samuel Abera

  8 months ago

  3k
• 
  Overlapped icons showcase

  Al pasar el cursor sobre el ícono apilado, se revela el ícono completo. Hovering over the stacked icon unveils the complete icon.

  Author:
  Lautaro Gómez

  4 months ago

  648
• 
  Flex Profile

  Tailwind Flex User Profile

  Author:
  Samuel Abera

  9 months ago

  3.1k
• 
  Avatar Group

  Author:
  Mohit Prajapati

  2 years ago

  8.8k