Avatar with Gradient Shadow

Related Examples

• Glowing gradient border

  on hover glow border

  Author:
  Prashant

  2 years ago

  22.8k
• Profile Card

  Show more details on hover

  Author:
  Tamani Phiri

  1 year ago

  13.7k
• 
  Soft color gradient

  Author:
  Mohit Prajapati

  2 years ago

  10.9k
• 
  Gradient Background Image

  Author:
  Kavita Joshi

  1 year ago

  7.4k
• 
  User Avatars

  Author:
  Sophia Baker

  2 years ago

  10.7k
• 
  User avatar with name

  Author:
  Prajwal Hallale

  2 years ago

  7.9k
• 
  Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface

  A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

  Author:
  Ayyamperumal S

  2 months ago

  544
• 
  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

  11 months ago

  1.7k
• 
  User avatar group

  Author:
  JaxStone

  2 years ago

  14.3k
• 
  canvas fully covers

  canvas fully covers

  Author:
  ABDESLAMI ACHRAF

  7 months ago

  2.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

  8 months ago

  1.8k
• Button with a gradient border using Tailwind CSS

  Author:
  Dipti narayan

  1 year ago

  11.7k