Clone comparison
Relay Mailroom · Three-pane mail DESIGN.md
A three-pane email workspace that balances folder navigation, message scanning, and a focused reading surface.
Updated:
What this example demonstrates
- Three-pane mail
- Message hierarchy
- Mobile reading
Code-driven rebuild
Reads the page structure and CSS directly, then builds a clean Tailwind CSS v4 project.
Complete page assets
Keeps layouts, variables, and assets in a safe static preview.
Responsive layouts
Light and dark themes
Change the device width or theme and both previews show the same state. Webpages scroll together, while each HTML pane scrolls on its own.
Recreation challenge
Desktop depends on three coordinated columns, while small screens need a useful reading order instead of a squeezed version of the same layout.
Limits of this example
Message actions are visual examples only. Keyboard shortcuts, search, and mail synchronization are outside the static result.
DESIGN.md
Design facts from the same capture
Download DESIGN.md- Grid container: Use display `grid`; grid-template-columns `208px 330px minmax(0px, 1fr)`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
- Article: Use max-width `760px`; padding `38px 42px`. When viewport width <= 900px, use padding `28px 22px`.
- Level 1 heading: Use font-size `20px`; margin `0px 0px 12px`. When dark mode, use background `#111318`.
- Text input: Use background `#fff`; border `1px solid #e3e4e8`; border-radius `10px`; font `inherit`; padding `10px 12px`; width `100%`. When dark mode, use background `#191c22`.
- Action Background: #f1f2f4
- Spacing: 4px · 8px · 12px · 20px · 28px
Use this workflow for your own page
Turn your public webpage into a project, then give the source and DESIGN.md to your coding tool. These guides walk through the steps.
More from Gallery
Extract your own webpage
Enter a public page you own or have permission to use. Get a Tailwind CSS v4 project and DESIGN.md. Your URL is kept when you sign in.