card

User Profile Card

Profile card with avatar, stats, and follow button.

profile social user | Claude 4.6 Opus

Prompt 

# 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

Notes

Prompt

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

Notes

  • The avatar overlapping the banner creates visual depth and a polished social-media feel.
  • Use tabular-nums on stat numbers for proper alignment.
  • Perfect for quick integration into any Astro, Next.js, or social platform project.

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