更多 卡片 布局(14)
查看全部- 01Pro

简洁反馈调查卡片
React 与 Tailwind 反馈卡片:三个问题,大约三十秒填完——邮箱字段、悬停预览的五星评分行、一个留言框,直接提交到你的接口。
- 02Pro

联系方式评分表单卡片
四个带图标的联系字段排在星级评分上方,评分结果用从「差」到「优秀」的文字呈现。React 与 Tailwind 打造,可直接接入你的 CRM。
- 03Pro

倒计时优惠券卡片
一个实时跳动的时分秒时钟,位于优惠券插画和一枚旋转的优惠贴纸下方。React 与 Tailwind 打造,设好结束时间即可上线。
- 04Pro

讲师课程卡片
以代码符号面板取代封面照片开场,接着是一条带分隔线的数据栏和讲师信息行,最后是立即报名按钮。React 与 Tailwind 打造,接入你自己的课程大纲即可。
- 05Pro

价格标签课程卡片
价格徽章跨在封面照片与文字内容的接缝处,下方是三个方形图标数据格。React 与 Tailwind 打造,定好价格即可发布。
- 06Pro

详细调查表单卡片
两个带标题的分区分别收集姓名邮箱、两个下拉菜单、0 到 5 满意度滑杆、星级评分和评论。React 与 Tailwind 打造,适合收集详细回答。
- 07Pro

折扣促销卡片
一枚旋转的 40% 贴纸锚定文字这一半,另一半是通栏的时尚照片。React 与 Tailwind 打造,改个数字即可上线。
- 08Pro

表情评分反馈卡片
五个表情作为单选磁贴,从很差到太爱了,下方是一个从 240 字倒数的可选评论框。React 与 Tailwind 打造,快速读懂用户情绪。
- 09Pro

反色个人资料卡片
反色的墨色底面始终与页面背景相反:方形头像、简介、加入日期、话题标签、邮件按钮。React 与 Tailwind 打造,可作为个人简介卡片使用。
- 11Pro

数量选择器商品卡片
一个每次变动都会播报的加减数量选择器,与划线原价并排,下方是加入购物车。React 与 Tailwind 打造,接入你的购物车逻辑即可。
- 12Pro

封面横幅个人资料卡片
方形头像有一半悬在封面色带外侧,带一个在线状态点,旁边是关注按钮、简介和技能标签。React 与 Tailwind 打造,可固定在团队网格里。
- 13Pro

分栏订阅通讯卡片
45 比 55 分栏:一侧是插画面板,另一侧是带标签的邮箱输入和通栏订阅按钮。React 与 Tailwind 打造,可嵌入侧边栏。
- 14Pro

订阅摘要卡片
证书徽章位于四项打勾的席位分配之上,一个填色面板显示扣费金额和下次账单日期。React 与 Tailwind 打造,可用于结账页面展示。
- 15Pro

宽幅订阅卡片
一半文案一半海报插画,插画满版延伸至卡片边缘,下划线小标题下方是内联邮箱输入框。基于 React 和 Tailwind,助你收集订阅。
https://neobrutalism.com/zh/blocks/cards/newsletter-signup-card




















