博客内容

博客卡片网格

Blog card grid

封面图 + 标签 + 标题 + 元信息

实时预览

提示词正文

Build a blog card grid with Tailwind CSS: a three-column responsive grid of post cards, each with a 16:10 cover image (object-cover, lazy-loaded), a small category tag above the title, a two-line-clamped post title that links, a one-line excerpt, and a meta row with author avatar, name, date and reading time. Add a subtle lift and shadow on hover, keep the whole card clickable, and use a skeleton placeholder while cover images load.

提示词保持英文原文——直接粘贴进 Claude、Cursor、v0 或任何 AI 编程工具即可使用。

怎么用

卡片整卡可点;标题两行截断;封面 16:10 object-cover;hover 微上浮。

同类提示词 · 博客内容

© 2026 Genisource Vibe · 提示词详情