Tailwind 页面模板
🚩使用方式
1. 所有模板使用 Tailwind CSS 以 class 的方式进行 css 样式包装,在使用之前需安装 Tailwind CSS ,可参考
Tailwind CSS 官网
。
2. 标注"需要JS"的模板使用 Alpine.js 进行数据和界面交互动态化的实现,在使用之前需安装 Alpine.js ,参考
Alpine.js 官网
。
3. 在页面下方选择你喜欢的模板,将代码复制并粘贴到你的页面中,炫酷的页面将会展现在你的眼前,请惊呼:“好酷的嘞”!
🚩创作者工具
温馨提示:这是给模板创作者使用的工具(用来给代码标准化和格式化的),用户请忽略。
源代码:
转换后:
⚠️代码中有
个
外部链接,注意替换!
✅代码中没有外部链接,可直接使用。
🚩拼接
案例
|
清空
代码
预览
加载中
从左侧模板中点击“拼接”
模板ID:
🚩模板
Header 页眉
28

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Navigation 导航
23

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Hero 首屏
25

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Title 标题
9

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Logo 图标
11

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Content 内容
17

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Feature 特点
19

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Integration 集成
6

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Team 团队
6
Blog 博客
9
Form 表单
13
Action 行动
35

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Testimonial 客户评价
11
FAQ 问答
12

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Pricing 价格
22

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
Footer 页脚
16

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码
拼接页面案例
下面是一些已经完成的拼接页面,你可以直接选择某个案例导入到你的拼接区域,然后随意调整它~
案例ID:1001





案例ID:1002






案例ID:1003





案例ID:1004





案例ID:1005





案例ID:1006





案例ID:1007




案例ID:1008




案例ID:1009





案例ID:1010





案例ID:1011






案例ID:1012






案例ID:1013






案例ID:1014






案例ID:1015






拼接页面代码
提示:如需预览不同屏幕宽度的页面效果,请点击 [预览↗] 进行预览。
⚠️ 注意:此拼接的模板页包含 个外部图片资源,请自行存储所有 https:// 开头的图片资源。
⚠️ 注意:此拼接的模板 需要JS,使用之前请参考页面顶部的 [使用方式] 安装 Alpine.js 。
模板ID:
暂无预览
提示:如需预览不同屏幕宽度的页面效果,请使用电脑端按 F12 打开 [调试控制台] 进行预览。
⚠️ 注意:此模板包含 个外部图片资源,请自行存储所有 https:// 开头的图片资源。
⚠️ 注意:此模板 需要JS,使用之前请参考页面顶部的 [使用方式] 安装 Alpine.js 。