克隆对比

Relay Mailroom · 三栏邮件 DESIGN.md

一个三栏邮件工作区，在文件夹导航、邮件浏览和专注阅读之间保持平衡。

更新于：2026年9月13日

这个示例展示了什么

Preview

DESIGN.md

直接读取页面结构和 CSS，生成干净的 Tailwind CSS v4 项目。

保留布局、变量与资源，生成安全静态预览。

切换设备宽度或亮暗主题，两侧都会显示同一个状态。网页预览同步滚动，HTML 代码则各自滚动。

桌面端依赖三个相互协调的列，小屏则需要合理的阅读顺序，而不是把同一布局硬挤进去。

邮件操作仅作视觉展示，键盘快捷键、搜索和邮件同步不属于静态结果。

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

把你的公开网页转换成项目，再将源码和 DESIGN.md 交给编程工具继续修改。下方指南介绍了具体步骤。

输入你拥有或获准使用的公开网页，获取 Tailwind CSS v4 项目和 DESIGN.md。登录后会保留你的网址。