# 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

# 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

# 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