card

Avatar Stack

Overlapping avatar group with overflow counter and tooltip.

avatar stack group users | Claude 4.6 Sonnet

Prompt 

# Role
You are a Senior Frontend Developer and Component Design Specialist with expertise in compact data display, collaborative UI patterns, and micro-interaction design.

# Objective
Build an overlapping avatar stack component that displays a group of user avatars with a "+N more" overflow counter, hover tooltips showing user names, and smooth hover expansion — commonly seen in GitHub, Linear, and Figma.

# Instructions
1. Create the avatar stack container:
   - Horizontal row of circular avatars overlapping by 30% (negative margin)
   - Display up to 5 visible avatars, then a "+N" overflow counter circle
   - Stack order: first avatar on top (highest `z-index`), decreasing toward the right
2. Style each avatar:
   - Circular (40px diameter) with a 2px solid border matching the background (creates separation)
   - Colored background with white initials (2 letters) as fallback
   - Generate distinct colors per user (hash the name to pick from a palette)
   - Hover: scale up slightly (1.15×) and raise z-index above all others
3. Build the overflow counter:
   - Same size circle as avatars, muted background
   - Shows "+3" or similar count of remaining users
   - On hover: expand into a dropdown list showing all hidden users (name + avatar)
4. Add tooltips:
   - On hover over any avatar, show a small tooltip above with the user's full name
   - Tooltip appears with a short fade-in (150ms)
   - Positioned above center of the avatar with a small arrow/caret pointing down
5. Implement hover expansion:
   - On hover over the entire stack, avatars spread apart slightly (reduce overlap)
   - Smooth transition (200ms ease)

# Constraints
- Pure CSS for layout, overlap, and hover expansion — JavaScript only for tooltip positioning
- Avatars must use `<img>` with `alt` text, falling back to initials via CSS
- Border color must match the parent background for the "cut-out" overlap effect
- Include at least 8 users in the data (5 visible + "+3" overflow)
- Accessible: `aria-label` on the stack describing the group (e.g., "8 team members")
- Dark mode only
- Responsive: avatar size scales down on small screens

# Output Format
- Single HTML file with embedded `<style>` and `<script>` blocks
- Include sample user data with names and generated initial colors
- Well-commented code with sections: avatar markup, overlap CSS, tooltips, overflow dropdown

Notes

Prompt

Role

You are a Senior Frontend Developer and Component Design Specialist with expertise in compact data display, collaborative UI patterns, and micro-interaction design.

Objective

Build an overlapping avatar stack component that displays a group of user avatars with a “+N more” overflow counter, hover tooltips showing user names, and smooth hover expansion — commonly seen in GitHub, Linear, and Figma.

Instructions

  1. Create the avatar stack container:
    • Horizontal row of circular avatars overlapping by 30% (negative margin)
    • Display up to 5 visible avatars, then a “+N” overflow counter circle
    • Stack order: first avatar on top (highest z-index), decreasing toward the right
  2. Style each avatar:
    • Circular (40px diameter) with a 2px solid border matching the background (creates separation)
    • Colored background with white initials (2 letters) as fallback
    • Generate distinct colors per user (hash the name to pick from a palette)
    • Hover: scale up slightly (1.15×) and raise z-index above all others
  3. Build the overflow counter:
    • Same size circle as avatars, muted background
    • Shows “+3” or similar count of remaining users
    • On hover: expand into a dropdown list showing all hidden users (name + avatar)
  4. Add tooltips:
    • On hover over any avatar, show a small tooltip above with the user’s full name
    • Tooltip appears with a short fade-in (150ms)
    • Positioned above center of the avatar with a small arrow/caret pointing down
  5. Implement hover expansion:
    • On hover over the entire stack, avatars spread apart slightly (reduce overlap)
    • Smooth transition (200ms ease)

Constraints

  • Pure CSS for layout, overlap, and hover expansion — JavaScript only for tooltip positioning
  • Avatars must use <img> with alt text, falling back to initials via CSS
  • Border color must match the parent background for the “cut-out” overlap effect
  • Include at least 8 users in the data (5 visible + “+3” overflow)
  • Accessible: aria-label on the stack describing the group (e.g., “8 team members”)
  • Dark mode only
  • Responsive: avatar size scales down on small screens

Output Format

  • Single HTML file with embedded <style> and <script> blocks
  • Include sample user data with names and generated initial colors
  • Well-commented code with sections: avatar markup, overlap CSS, tooltips, overflow dropdown

Notes

  • Negative margin creates the overlap — use margin-left: -12px on all but the first avatar.
  • The 2px border matching the background color creates the visual separation between overlapping circles.
  • Hash-based color assignment ensures the same user always gets the same avatar color.

Related Prompts

View prompt details

Glassmorphic Settings Card

A compact glass-effect settings panel for a dashboard

# Role You are a Senior Frontend Developer and CSS Specialist with deep expertise in modern visual effects, glassmorphism design patterns, and micro-interactions. # Objective Design a compact, glassmorphic settings card for a dashboard interface featuring toggle switches, system labels, and a polished translucent aesthetic. # Instructions 1. Create a settings card container with glassmorphic styling: - `backdrop-filter: blur(12px)` for the frosted glass effect - Semi-transparent background: `rgba(255, 255, 255, 0.05)` or similar - Border: `1px solid rgba(255, 255, 255, 0.1)` - Subtle radial gradient overlay for depth - Rounded corners (`border-radius: 16px`) and soft shadow 2. Add a card header: - Title: "Settings" in JetBrains Mono or monospace fallback - Optional subtitle or description in muted text 3. Include 3–4 settings rows, each containing: - A system label (e.g., "Dark Mode", "Notifications", "Auto-Save") - A toggle switch on the right side of each row - Subtle separator line between rows 4. Build custom toggle switches: - Pill-shaped track with circle thumb - Smooth sliding transition (200ms ease) - Active state: accent color track with white thumb - Inactive state: muted gray track 5. Position the card on a dark gradient background to showcase the glass effect # Constraints - Use raw CSS — no Tailwind or CSS frameworks (produces best results for glassmorphism) - Use `font-family: 'JetBrains Mono', monospace` for labels - Keep interactive elements to 3–4 max for clean spacing - Ensure the card works without JavaScript for toggle appearance (use CSS `:checked` on hidden checkboxes) - Card max-width: 360px, centered on the page # Output Format - Single HTML file with embedded `<style>` block - Pure CSS toggles using `<input type="checkbox">` + `<label>` technique - Include a dark gradient body background to demonstrate the glass effect - Clean, well-commented CSS with clear variable definitions

ui glassmorphism settings
GPT 5.3 Ultra
View prompt details

User Profile Card

Profile card with avatar, stats, and follow button.

# Role You are a Senior Frontend Developer and CSS Specialist with expertise in social UI components and card-based layouts. # Objective Build a polished user profile card featuring an avatar, user information, social stats, and a follow/connect button — styled for dark mode with a modern, social-media-inspired design. # Instructions 1. Create a card container with: - Dark background, rounded corners, and subtle border - Optional: cover image or gradient banner at the top (120px height) 2. Add the user profile section: - Circular avatar (80px) overlapping the banner/top edge - User display name (bold, large) - Username or handle in muted text (e.g., "@username") - Short bio/description (1–2 lines, muted) 3. Add a stats row with 3 metrics: - Posts count, Followers count, Following count - Each with a number (bold) and label (muted, small) - Separated by subtle vertical dividers 4. Add action buttons: - Primary "Follow" button (accent color, filled) - Secondary "Message" button (outline style) - Buttons side by side, full-width within card 5. Style with Tailwind CSS in dark mode: - Avatar with white ring border for contrast - Hover effects on buttons - Consistent padding and spacing # Constraints - Semantic HTML with proper heading hierarchy - Tailwind CSS only — no custom CSS - Add `aria-label` on action buttons - Card max-width: 350px, centered - Responsive: card should look good at any width down to 280px - Use placeholder data that feels realistic (not "John Doe") # Output Format - Single HTML file using Tailwind CSS CDN - Include realistic placeholder profile data - Well-structured markup with brief comments

profile social user
Claude 4.6 Opus
View prompt details

Weather Widget Card

Glassmorphic weather card with conditions and forecast.

# Role You are a Senior Frontend Developer and Visual Design Engineer specializing in data-rich widget design, glassmorphism, and compact information display. # Objective Build a glassmorphic weather widget card displaying current conditions, temperature, a 5-day forecast strip, and atmospheric details — styled with depth, translucency, and polished typography. # Instructions 1. Create the main weather card: - Glassmorphism effect: semi-transparent background with `backdrop-filter: blur(20px)` - Rounded corners (20px), subtle white border at low opacity - Background: gradient overlay simulating sky conditions (dark blue for night theme) - Max-width: 400px, centered on the page 2. Build the current conditions section (top half): - Location name and date (e.g., "San Francisco · Tue, Mar 28") - Large temperature display: `72°` in bold, oversized font (4rem+) - Weather condition icon (CSS-only: sun, cloud, rain using shapes and gradients) - Condition text: "Partly Cloudy" - High/Low temperatures: "H: 76° L: 58°" 3. Add the 5-day forecast strip (middle): - Horizontal row of 5 day cards - Each card shows: day abbreviation (Mon, Tue...), small weather icon, high/low temps - Active day (today) highlighted with accent background - Scrollable on overflow for narrow screens 4. Build the atmospheric details grid (bottom): - 2×2 grid of detail cards: - Wind: speed + direction (e.g., "12 mph NW") - Humidity: percentage with a small bar indicator - UV Index: number with severity label (Low/Moderate/High) - Visibility: distance in miles - Each detail has a label, value, and subtle icon 5. Animations: - Gentle floating animation on the weather condition icon - Numbers fade in on load (staggered, 100ms delay each) # Constraints - CSS-only weather icons — no icon fonts, SVGs, or images - Glassmorphism: must use `backdrop-filter: blur()` with fallback for unsupported browsers - Use `font-variant-numeric: tabular-nums` for all temperature values - Semantic HTML with proper use of `<article>`, `<section>`, `<dl>` for details - Dark theme only — night sky aesthetic - Responsive: card stretches to full-width on mobile # Output Format - Single HTML file with embedded `<style>` block - Include realistic weather data for a sample location - Well-commented CSS with sections: glassmorphism, weather icons, forecast strip, details grid - Use CSS custom properties for theming

weather widget glass +1
Gemini 3.1 Pro