Prompt
Build an email call-to-action card. Stack: Next.js (App Router), React, TypeScript and Tailwind CSS v4. DESIGN SYSTEM (use exactly): - Page background #edeef2. Surface (light cards, light pills) #f6f6f8. Muted (gray cards) #d9d9dc. Border #dcdde2. - Ink #1e1e1e for text, dark cards and primary buttons. Muted text #8a8a8f. Text on dark: #ffffff. - Accents: purple #c084fc, lime #a3f207. - Font: Geist Sans. Headings semibold with tight tracking (-0.04em) and tight leading (0.95–1.05). - Cards: 28px corner radius. Buttons and chips: fully rounded pills (9999px). - When a card wraps pills, its radius = pill radius + card padding (e.g. 40px pills + 8px padding → 28px card). - Side gutter: 30px from 768px up, 20px on phones. - Links and buttons never change color, background or opacity on hover. WRAPPER - A section with the side gutter (30px; 20px on phones) and the same top padding. - Inside, a card: background lime #a3f207, text #1e1e1e (fixed, so it works on light and dark pages), radius 40px (28px on phones). - Flex column, centered, text centered. Padding 96px × 40px from 768px, 56px × 20px on phones. Gap 32px (24px on phones). 1. ONE SMALL LINE (not a heading) - A <p>, max-width 36rem, 20px (18px on phones), leading relaxed: "Need something custom? Fill up the [contact form ↗]". - [contact form ↗] is an inline link pill to /contact: 36px tall, padding 0 16px, black background, white 16px medium text, a 14px diagonal arrow, vertical-align middle, 2px side margin. - Then a <br> and "or drop us an email at" at 60% opacity. 2. THE EMAIL — the only big text - A mailto link: clamp(1.5rem, 6vw, 5.5rem), semibold, leading 1, tracking -0.04em, max-width 100%, break-words. - Write it as name@<wbr>domain.com, so on phones it wraps after the @ and never splits mid-word. 3. BUTTONS - "Copy email": #f6f6f8 pill with a copy icon. Uses navigator.clipboard.writeText. On success, shows a check icon and "Copied!" for 2 seconds (aria-live polite). If the clipboard fails, fall back to window.prompt. - "Send email": black pill with white text, a diagonal arrow, and a mailto link. - On phones: stacked, full width, 56px tall. From 640px: side by side, 48px tall, min-width 160px, 14px medium text. No section title or label above it. No hover color changes.
More in UI Components
Transparent navbar with centered links that fade in rounded dropdown cards of pill buttons.
Pill Navbar with Hover Dropdowns
Four-card bento footer: a big black call-to-action, a gray link card, and purple and lime cards.
Bento Footer
A smooth, full-screen phone menu with big rounded link rows, account pills and socials.
Full-Screen Mobile Menu
Rounded contact form with selectable topic pills, inline validation and a success state.
Contact Form with Topic Pills
A clickable product card with an autoplaying video preview, purple and lime accents, a heart button, a clamped prompt and a copy button.
Prompt Product Card
A disabled nav pill whose label rolls up to “Coming soon” on hover, with a SOON tag on touch screens.