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

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码

查看代码