Auth Screen · React + Tailwind · Web + Mobile

Forgot Password Screen

Minimal split-screen forgot-password with photo panel, single email field, and reset link flow. React + Tailwind, Claude Code, Cursor, Lovable, Replit, Codex.

Web

Open preview

Loading preview

Split-screen layout: stock photo left, minimal form right. React and Tailwind. Copy the prompt for your AI coding tool.

Build this web screen with a prompt

Each prompt is written for that specific tool and includes full design specs: colours, font, border radius, layout, and all form fields.

Build a full-viewport forgot-password screen as a React + Tailwind component called AuthForgotPassword.

LAYOUT: Split screen, two equal columns (50/50), white background (#FFFFFF), full viewport (w-screen h-screen).

LEFT COLUMN — image panel:
- Outer div: p-6, h-full
- Inner div: rounded-3xl overflow-hidden h-full relative
- Background image: https://iaeaagcctrfxahmgvzeq.supabase.co/storage/v1/object/public/images/ai-library-stock/dark-interior-woman.jpg — use <img> object-cover w-full h-full
- Wordmark overlay bottom-left: absolute bottom-5 left-5, text "Acme", text-[11px] font-medium text-white opacity-60

RIGHT COLUMN — form panel:
- Flex column, items-center, justify-center, h-full, px-8
- Inner form wrapper: w-full max-w-sm

FORM CONTENTS:
1. Back link row: flex items-center gap-1.5, inline left-arrow SVG (12x12, currentColor), text "Back to sign in", text-[12px] text-[#6B7280] hover:text-black, mb-8 on the row
2. Logo mark: w-7 h-7 bg-black rounded-lg mb-8
3. H1: "Forgot password?" — text-[24px] font-medium text-black mb-1
4. Subtitle: "No problem. Enter your email and we will send a reset link." — text-[13px] text-[#6B7280] mb-8
5. Label "Email" text-[12px] font-medium text-black mb-1.5, Input: type=email placeholder="[email protected]", border border-gray-200 rounded-xl px-3.5 py-2.5 text-[13px] w-full
6. Gap mb-6
7. Primary button: "Send reset link" — w-full bg-[#2B65F6] text-white rounded-xl px-3.5 py-2.5 text-[13px] font-medium hover:opacity-90 transition-opacity
8. Confirmation note below button: "Check your inbox after submitting." text-[11px] text-[#6B7280] text-center mt-3

RULES: Switzer font. No icon libraries. No em-dashes. Use <img> not next/image. No Google button needed on this screen.

Mobile

9:41

Back to sign in

Forgot password?

We will send a reset link to your email.

Check your inbox after submitting.

Mobile version with full-bleed photo header, status bar, and compact form. No Google sign-in (too cramped for mobile).

Build this mobile screen with a prompt

Prompts for React Native with Expo. Same design language: white background, black text, blue CTA only, Switzer font.

Build AuthForgotPasswordMobile.tsx: a mobile forgot-password screen for a phone frame (w-full h-full flex flex-col).

Top 38%: image area (no border radius, full bleed):
- <img> src="https://iaeaagcctrfxahmgvzeq.supabase.co/storage/v1/object/public/images/ai-library-stock/dark-interior-woman.jpg" className="w-full h-full object-cover"
- Status bar overlay absolute top-0 inset-x-0: flex justify-between items-center px-4 pt-2, text-white text-[10px]
  Left: "9:41" font-medium
  Right: inline SVG WiFi + battery icons, white, ~12x12

Bottom 62%: bg-white, flex col, px-6 pt-6:
1. Back link: flex items-center gap-1 text-[11px] text-[#6B7280], left-arrow SVG (10x10), "Back to sign in", mb-6
2. "Forgot password?" text-[18px] font-medium text-black mb-1
3. "We will send a reset link to your email." text-[12px] text-[#6B7280] mb-6
4. Label "Email" text-[11px] font-medium text-black mb-1, Input email border border-gray-200 rounded-xl px-3 py-2 text-[12px] w-full
5. mb-6
6. "Send reset link" button: w-full bg-[#2B65F6] text-white rounded-xl py-2.5 text-[12px] font-medium
7. "Check your inbox after submitting." text-[10px] text-[#6B7280] text-center mt-3

Switzer font. No icon libraries. Use <img>.

FAQ

What stack do these auth screen prompts target?+

React with Tailwind CSS. The prompts are written for Next.js 14 App Router by default but the layout and styling descriptions work in any React framework. Mobile prompts target React Native with Expo.

Can I paste these prompts directly into Claude Code or Cursor?+

Yes. Each prompt is self-contained with full design specs, colours, font names, and layout instructions. Open a new conversation, paste the prompt, and the tool generates a production-ready component.

Do I need any icon libraries?+

No. All icons in the generated screens use minimal inline SVGs. There are no Lucide, Heroicons, or similar dependencies required.

What font is used in the prompts?+

Switzer. The prompts reference it via font-family: Switzer, sans-serif. Make sure Switzer is loaded in your project via a @font-face rule or a font provider.

Can I use these screens without a Lucy+ subscription?+

You can view the design and read the first part of each prompt. The full prompt text and code require a Lucy+ subscription.