构建工具
- Text
加上 lucide-react 图标和 Tailwind CSS — 无其他运行时依赖。
更多 功能板块 布局(10)
查看全部- 01Pro

非对称功能卡片
两张短卡片堆叠在一张承载唯一行动号召的高卡片旁,上方是标题和图标徽章。基于 React 和 Tailwind——为三个功能排出主次。
- 02Pro

Bento 服务功能网格
Bento 面板从边到边排列,分割线本身就是布局,每块都有自己的表面颜色、文案和按钮。基于 React 和 Tailwind——介绍你的服务。
- 04Pro

居中功能数据卡片
一个满宽色带上的居中面板,承载一个图标徽章、一句主张、三张数据卡片和一个按钮。基于 React 和 Tailwind——用作页面的换气点。
- 05Pro

代码预览功能拆分
用终端说话:三条带分割线的能力旁边是一段重放的部署日志和两张运行时长图块,叠在一个偏移色块上。基于 React 和 Tailwind——粘贴你自己的输出。
- 06Pro

三卡图标功能组
同级卡片位于一条浅色横带上,每张都有一个圆形图标图块和一个嵌进卡片角落的旋转方块。基于 React 和 Tailwind——为每对表面重新配色。
- 07Pro

数据横带功能区块
一句两行的主张旁边是一个 2×2 的数据卡片网格,位于一条高对比度的横带上,没有任何可点击的内容。基于 React 和 Tailwind——放在两个区块之间。
- 08Pro

移动应用功能列表
一个手机样机旁边是三行写成结果导向的收益说明、一个带偏移阴影的标题和两个行动号召。基于 React 和 Tailwind——导出一张新的样机图即可。
- 09Pro

手机样机功能网格
四张卡片分列在居中手机样机两侧,每张都以自己的满宽按钮收尾,装饰图形呈对角分布。基于 React 和 Tailwind——保持卡片数量为偶数。
- 10Pro

堆叠卡片功能区块
图标行在一条满版出血的色带上摆事实,用一叠互相交叠的证据卡片来回应。基于 React 和 Tailwind——放在 Hero 下方。
- 11Pro

标签功能卡片网格
六张卡片,每张本身就是一个链接,按分类打标签,底部是一条悬停时箭头会滑动的页脚横条。基于 React 和 Tailwind——写六张或十二张都行。
https://neobrutalism.com/zh/blocks/feature-blocks/bordered-services-feature-row




















