🎨 渐变背景案例

渐变蓝紫科技风

科技渐变背景

from-blue-600 via-purple-600 to-pink-500

<div class="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-500">蓝紫粉渐变</div>

渐变青绿自然风

自然生态渐变

from-emerald-500 via-teal-500 to-cyan-500

<div class="bg-gradient-to-br from-emerald-500 via-teal-500 to-cyan-500">青绿渐变</div>

渐变日落暖色风

日落暖色渐变

from-amber-500 via-orange-500 to-red-500

<div class="bg-gradient-to-r from-amber-500 via-orange-500 to-red-500">暖色渐变</div>

渐变深邃夜空风

深邃夜空渐变

from-slate-900 via-indigo-900 to-purple-900

<div class="bg-gradient-to-b from-slate-900 via-indigo-900 to-purple-900">夜空渐变</div>

渐变糖果甜美风

糖果甜美渐变

from-pink-500 via-rose-500 to-fuchsia-500

<div class="bg-gradient-to-r from-pink-500 via-rose-500 to-fuchsia-500">甜美渐变</div>

渐变黄金商务风

黄金商务渐变

from-yellow-600 via-amber-500 to-orange-600

<div class="bg-gradient-to-r from-yellow-600 via-amber-500 to-orange-600">金色渐变</div>

渐变对角线科技感

对角线科技渐变

from-cyan-500 via-blue-500 to-indigo-600

<div class="bg-gradient-to-tr from-cyan-500 via-blue-500 to-indigo-600">to-tr对角线渐变</div>

渐变磨砂玻璃效果

磨砂玻璃效果

backdrop-blur + 半透渐变

<div class="bg-gradient-to-r from-white/5 to-white/10 backdrop-blur-sm border border-white/20">
  磨砂玻璃渐变
</div>

渐变多色网格混合

多色网格渐变

径向网格叠加 + 线性渐变

<div class="relative bg-gradient-to-r from-purple-600 via-pink-600 to-orange-500 rounded-xl p-8 overflow-hidden">
  <div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.2)_1px,transparent_1px)] bg-[size:24px_24px]"></div>
  <div class="relative">内容区域</div>
</div>

🎨 颜色使用案例

颜色品牌主色展示

Blue 500

Purple 500

Emerald 500

Amber 500

Rose 500

Cyan 500

Indigo 500

Teal 500

<div class="bg-blue-500">蓝色</div>
<div class="bg-purple-500">紫色</div>
<div class="bg-emerald-500">绿色</div>

颜色色阶渐变展示

blue-50

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

blue-700

blue-800

<div class="bg-blue-50">最浅</div>
<div class="bg-blue-500">基准色</div>
<div class="bg-blue-900">最深</div>

颜色文字颜色搭配

蓝色文字 - text-blue-400

紫色文字 - text-purple-400

绿色文字 - text-emerald-400

橙色文字 - text-amber-400

玫瑰红文字 - text-rose-400

青色文字 - text-cyan-400

渐变文字 - bg-gradient-to-r from-blue-400 to-purple-400

<p class="text-blue-400">蓝色文字</p>
<p class="text-gradient bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">渐变文字</p>

颜色背景色卡片

深蓝卡片

bg-blue-600

紫色卡片

bg-purple-600

绿色卡片

bg-emerald-600

橙色卡片

bg-amber-600

<div class="bg-blue-600 rounded-lg p-3">蓝色卡片</div>
<div class="bg-emerald-600 rounded-lg p-3">绿色卡片</div>

颜色透明度使用

100%

75%

50%

25%

10%

使用 / 后缀控制透明度: bg-blue-600/50

<div class="bg-blue-600/50">50%透明度</div>
<div class="bg-blue-600/25">25%透明度</div>

颜色边框颜色搭配

蓝色边框

紫色边框

绿色边框

橙色边框

<div class="border-2 border-blue-500">蓝色边框</div>
<div class="border-2 border-purple-500">紫色边框</div>

颜色渐变背景组合

蓝→紫

绿→墨绿

橙→粉

青→蓝

<div class="bg-gradient-to-r from-blue-500 to-purple-500">渐变</div>

颜色主题色应用

主色调 - 品牌识别

成功色 - 正向提示

警告色 - 注意提示

错误色 - 危险提示

<button class="bg-blue-600">主按钮</button>
<button class="bg-emerald-600">成功按钮</button>
<button class="bg-rose-600">危险按钮</button>

颜色悬停颜色变化

变色

<button class="bg-blue-600 hover:bg-blue-500">悬停变亮</button>
<div class="bg-blue-600 hover:bg-purple-600">悬停变色</div>

颜色完整色板参考

Slate

Gray

Zinc

Neutral

Stone

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

Tailwind CSS 内置22种颜色，每种颜色有10个色阶（50-950）

<div class="bg-blue-500">Blue</div>
<div class="bg-emerald-600">Emerald</div>
<div class="bg-purple-400">Purple</div>

✍️ 文字排版案例

排版渐变文字标题

渐变文字标题

优雅的渐变效果让标题更加醒目

<h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
  渐变文字标题
</h1>

排版霓虹发光文字

霓虹发光

霓虹灯效果的文字排版

<h1 class="text-4xl md:text-5xl font-bold text-blue-400" 
    style="text-shadow: 0 0 10px rgba(59,130,246,0.5), 0 0 20px rgba(59,130,246,0.3), 0 0 40px rgba(59,130,246,0.1);">
  霓虹发光
</h1>

排版超大粗体标题

BOLD
IMPACT

超粗体+紧凑字距，视觉冲击力强

<h1 class="text-5xl md:text-7xl font-black text-white tracking-tight">
  BOLD IMPACT
</h1>

排版优雅衬线字体

Elegant Serif

优雅的衬线字体适合品牌展示

<h1 class="text-4xl md:text-5xl font-serif text-white italic tracking-wide">
  Elegant Serif
</h1>

排版层级文字组合

现代设计的新趋势

探索2024年最值得关注的设计方向，从视觉语言到用户体验的全方位革新。

By John Doe•5 min read

<div>
  <p class="text-blue-400 text-sm uppercase tracking-wider">标签</p>
  <h2 class="text-2xl md:text-3xl font-bold text-white">主标题</h2>
  <p class="text-gray-400 text-base leading-relaxed">描述文字</p>
  <div class="flex gap-3 mt-4 text-sm"><span>作者</span><span>时间</span></div>
</div>

排版引用块样式

设计不仅仅是它看起来怎样，还在于它如何运作。

— Steve Jobs

<div class="bg-slate-800/30 rounded-xl p-6 border border-gray-700">
  <i class="fas fa-quote-left text-gray-600 text-3xl mb-3 block"></i>
  <p class="text-gray-300 text-lg italic leading-relaxed">引用文字</p>
  <p class="text-gray-500 text-sm mt-3">— 作者</p>
</div>

排版代码块样式

terminal

$ npm install tailwindcss
$ npx tailwindcss init
✨ Done in 2.3s

<div class="bg-slate-800/30 rounded-xl p-4 border border-gray-700">
  <div class="flex items-center gap-2 mb-3">
    <div class="w-3 h-3 bg-red-500 rounded-full"></div>
    <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
  </div>
  <pre class="text-green-400 text-sm font-mono">代码内容</pre>
</div>

排版装饰下划线标题

特色标题

渐变下划线装饰效果

<h2 class="text-3xl md:text-4xl font-bold text-white inline-block relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-gradient-to-r after:from-blue-500 after:to-purple-500 after:rounded-full after:-bottom-2">
  特色标题
</h2>

排版字母间距大片

LUXURY

PREMIUM COLLECTION

<h1 class="text-3xl md:text-4xl font-bold text-white tracking-[0.2em] uppercase">
  LUXURY
</h1>
<p class="text-gray-400 text-sm tracking-widest">PREMIUM COLLECTION</p>

排版 Hero 标题组合

✨ Introducing v2.0

创造令人惊叹的
数字体验

使用现代化的工具和技术，快速构建响应式、高性能的网页应用。

✓ 无需配置✓ 即开即用✓ 完全免费

<div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-8 text-center">
  <p class="text-blue-400 text-sm uppercase tracking-wider mb-3">标签</p>
  <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 leading-tight">主标题</h1>
  <p class="text-gray-400 text-lg max-w-2xl mx-auto">描述文字</p>
  <div class="flex gap-3 justify-center mt-6 text-sm text-gray-500">
    <span>✓ 特性1</span><span>✓ 特性2</span>
  </div>
</div>

✨ 文字图标组合案例

图标+文字按钮组合

<button class="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg">
  <i class="fas fa-download"></i>下载
</button>

图标+文字菜单项

首页数据分析用户管理系统设置

<a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-300 hover:bg-blue-600/20 hover:text-blue-400 rounded-lg">
  <i class="fas fa-home w-5"></i><span>首页</span>
</a>

图标+文字卡片标题

云存储

安全可靠

安全防护

数据加密

快速部署

一键启动

24h支持

专业服务

<div class="text-center">
  <i class="fas fa-cloud text-blue-400 text-2xl mb-2"></i>
  <h3 class="text-white font-semibold">标题</h3>
  <p class="text-gray-500 text-xs">描述</p>
</div>

图标+文字统计数据

总用户

45.2K

增长率

+32%

总收入

¥128K

增长率

4.9

<div class="flex items-center gap-3">
  <div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
    <i class="fas fa-users text-blue-400"></i>
  </div>
  <div><p>标题</p><p>数值</p></div>
</div>

图标+文字列表项

已完成项目开发

正在进行UI设计

等待客户反馈

需要紧急处理

<div class="flex items-center gap-3">
  <i class="fas fa-check-circle text-emerald-400"></i>
  <span>任务描述</span>
</div>

图标+文字社交链接

Twitter Instagram Facebook GitHub

<a href="#" class="inline-flex items-center gap-2 text-gray-400 hover:text-blue-400">
  <i class="fab fa-twitter text-lg"></i><span>Twitter</span>
</a>

图标+文字通知徽章

3

12

99+

<div class="relative inline-block">
  <i class="fas fa-bell text-gray-400 text-xl"></i>
  <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span>
</div>

图标+文字表单输入

<div class="relative">
  <i class="fas fa-user absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
  <input type="text" placeholder="用户名" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg py-2 pl-9">
</div>

图标+文字徽章标签

前端后端设计分析

<span class="inline-flex items-center gap-1.5 bg-blue-600/20 text-blue-400 text-xs px-3 py-1 rounded-full">
  <i class="fas fa-code"></i>前端
</span>

图标+文字页脚链接

产品

公司

资源

contact@example.com

<a href="#" class="flex items-center gap-2 text-gray-400 hover:text-white text-xs">
  <i class="fas fa-angle-right"></i>链接文字
</a>

〰️ 分割线案例

分割线基础实线

分隔线上方内容

分隔线下方内容

<hr class="border-t border-gray-600">

分割线虚线风格

<hr class="border-t border-dashed border-gray-500">
<hr class="border-t border-dotted border-gray-500">
<hr class="border-t border-double border-gray-500 border-t-4">

分割线带文字

或使用社交账号登录

精选推荐

<div class="relative">
  <div class="absolute inset-0 flex items-center">
    <div class="w-full border-t border-gray-600"></div>
  </div>
  <div class="relative flex justify-center">
    <span class="bg-slate-800/30 px-4 text-sm text-gray-400">文字</span>
  </div>
</div>

分割线渐变风格

<div class="h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent"></div>

分割线带图标

<div class="relative">
  <div class="absolute inset-0 flex items-center">
    <div class="w-full border-t border-gray-600"></div>
  </div>
  <div class="relative flex justify-center">
    <span class="bg-slate-800/30 px-4"><i class="fas fa-heart text-rose-400"></i></span>
  </div>
</div>

分割线粗细变化

<hr class="border-t border-gray-600">
<hr class="border-t-2 border-gray-500">
<hr class="border-t-4 border-gray-400">
<hr class="border-t-8 border-gray-300">

分割线彩色风格

<hr class="border-t border-blue-500">
<hr class="border-t border-purple-500">
<hr class="border-t border-rose-500">

分割线发光效果

<div class="h-px bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]"></div>

分割线斜线风格

内容A/内容B|内容C•内容D

<div class="flex items-center justify-center gap-3">
  <span>内容A</span><span>/</span><span>内容B</span>
</div>

分割线动画效果

✨ 热门推荐 ✨

悬停效果

<div class="relative group">
  <div class="absolute inset-0 flex items-center">
    <div class="w-full border-t border-gray-600 group-hover:border-blue-500 transition-colors"></div>
  </div>
  <div class="relative flex justify-center">
    <span class="bg-slate-800/30 px-4 text-sm text-gray-400 group-hover:text-blue-400">悬停效果</span>
  </div>
</div>
<div class="w-full h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent animate-pulse"></div>

🚀 Navbar 导航栏案例

Navbar 导航栏案例

首页产品关于联系

<!-- 响应式导航栏组件 -->
<nav class="bg-slate-800/80 backdrop-blur-sm px-4 py-3 flex justify-between items-center flex-wrap gap-3">
  <!-- Logo区域 -->
  <div class="flex items-center space-x-2">
    <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">L</div>
    <span class="font-bold text-white text-lg">Logo</span>
  </div>
  <!-- 桌面端菜单 -->
  <div class="hidden md:flex space-x-6">
    <a href="#" class="text-gray-300 hover:text-blue-400">首页</a>
    <a href="#" class="text-gray-300 hover:text-blue-400">产品</a>
    <a href="#" class="text-gray-300 hover:text-blue-400">关于</a>
    <a href="#" class="text-gray-300 hover:text-blue-400">联系</a>
  </div>
  <!-- 右侧按钮 -->
  <div class="flex items-center space-x-3">
    <button class="hidden sm:block text-gray-300 hover:text-white"><i class="fas fa-search"></i></button>
    <button class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-1.5 rounded-lg">登录</button>
    <button class="md:hidden text-gray-300 hover:text-white"><i class="fas fa-bars"></i></button>
  </div>
</nav>

💡 关键类：flex justify-between items-center 实现两端对齐，hidden md:flex 实现响应式菜单切换

Navbar 左侧Logo+居中菜单

<nav class="bg-slate-800/80 backdrop-blur-sm px-6 py-3 flex justify-between items-center">
  <div class="text-white text-xl font-bold">Logo</div>
  <div class="hidden md:flex space-x-8">
    <a href="#" class="text-gray-300 hover:text-white">首页</a>
  </div>
  <button class="bg-blue-600 text-white px-4 py-1.5 rounded-lg">登录</button>
</nav>

Navbar 毛玻璃透明效果

<nav class="backdrop-blur-md bg-white/10 px-6 py-3 flex justify-between items-center">
  <div class="flex items-center gap-2">
    <div class="w-8 h-8 bg-white/20 rounded-lg"></div>
    <span class="text-white font-bold">GlassNav</span>
  </div>
  <div class="hidden md:flex space-x-6">
    <a href="#" class="text-white/80 hover:text-white">导航链接</a>
  </div>
  <button class="bg-white/20 backdrop-blur text-white px-4 py-1.5 rounded-lg">开始使用</button>
</nav>

Navbar 暗黑侧边展开式

CollapseNav

仪表板项目任务团队设置

<div class="bg-slate-800 px-5 py-3 flex justify-between items-center">
  <div class="flex items-center gap-3">
    <i class="fas fa-bars text-gray-400"></i>
    <span class="text-white font-bold">CollapseNav</span>
  </div>
  <div class="flex items-center gap-3">
    <i class="fas fa-search text-gray-400"></i>
    <i class="fas fa-bell text-gray-400"></i>
  </div>
</div>

Navbar 渐变强调风格

<nav class="px-6 py-3 flex justify-between items-center">
  <div class="text-transparent bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text font-bold text-xl">Gradient</div>
  <div class="hidden md:flex space-x-6">
    <a href="#" class="text-gray-300 hover:text-blue-400">链接</a>
  </div>
  <button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-4 py-1 rounded-lg">注册</button>
</nav>

Navbar 移动端抽屉式

DrawerNav

首页产品服务关于我们联系方式

<div class="bg-slate-800 px-4 py-3 flex justify-between items-center">
  <div class="text-white font-bold text-lg">DrawerNav</div>
  <div class="flex gap-4">
    <i class="fas fa-search text-gray-400 text-xl"></i>
    <i class="fas fa-bars text-gray-400 text-xl"></i>
  </div>
</div>
<div class="bg-slate-800/50 px-4 py-3 border-t border-gray-700 flex flex-col space-y-2">
  <a href="#" class="text-gray-300 py-1">菜单项</a>
</div>

Navbar 简约无背景风格

<nav class="px-6 py-4 flex flex-wrap justify-between items-center gap-4">
  <div class="text-white text-xl font-bold tracking-tight">Minimal</div>
  <div class="flex flex-wrap gap-6 text-sm">
    <a href="#" class="text-gray-400 hover:text-white">菜单</a>
  </div>
  <button class="border border-gray-600 text-gray-300 px-4 py-1.5 rounded-full">按钮</button>
</nav>

🏷️ 标签案例

标签基础圆角标签

默认标签紫色标签成功标签警告标签危险标签

<span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full">默认标签</span>
<span class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">紫色标签</span>

标签轮廓边框标签

边框标签紫色边框绿色边框橙色边框红色边框

<span class="border border-blue-500 text-blue-400 text-xs px-3 py-1 rounded-full">边框标签</span>

标签圆角方形标签

设计开发产品运营市场

<span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-md">设计</span>

标签圆点装饰标签

进行中已完成待审核已驳回

<span class="flex items-center gap-1.5 text-xs text-gray-300">
  <span class="w-2 h-2 bg-blue-500 rounded-full"></span>进行中
</span>

标签可关闭标签

标签一标签二标签三

<span class="inline-flex items-center gap-2 bg-blue-600/20 text-blue-400 text-xs px-3 py-1 rounded-full">
  标签 <i class="fas fa-times cursor-pointer"></i>
</span>

标签带图标标签

Twitter GitHub Instagram Telegram

<span class="inline-flex items-center gap-1.5 bg-blue-600 text-white text-xs px-3 py-1 rounded-full">
  <i class="fab fa-twitter"></i>Twitter
</span>

标签渐变标签

热门推荐新品上市限时优惠爆款精选

<span class="bg-gradient-to-r from-blue-500 to-purple-500 text-white text-xs px-3 py-1 rounded-full">
  热门推荐
</span>

标签大号标签

默认标签稍大标签大标签

<span class="bg-blue-600 text-white text-sm px-4 py-1.5 rounded-full">默认标签</span>
<span class="bg-emerald-600 text-white text-base px-5 py-2 rounded-full">大标签</span>

标签可点击标签

点击标签1 点击标签2 点击标签3

<span class="cursor-pointer bg-slate-700 hover:bg-blue-600 text-gray-300 hover:text-white text-xs px-3 py-1 rounded-full transition-all">
  点击标签
</span>

标签计数徽章

3

12

99+

<div class="relative inline-block">
  <i class="fas fa-bell text-gray-400 text-xl"></i>
  <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span>
</div>

🔘 按钮案例

按钮基础风格

<button class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg transition">主要按钮</button>

按钮边框风格

<button class="border border-blue-600 text-blue-400 hover:bg-blue-600 hover:text-white px-4 py-2 rounded-lg transition">边框按钮</button>

按钮渐变风格

<button class="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white px-4 py-2 rounded-lg transition">蓝紫渐变</button>

按钮圆角风格

<button class="bg-blue-600 text-white px-4 py-2 rounded-full hover:bg-blue-500 transition">胶囊按钮</button>

按钮阴影悬浮

<button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-shadow">阴影按钮</button>

按钮带图标按钮

<button class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg transition">
  <i class="fas fa-download"></i>下载
</button>

按钮大小尺寸

<button class="bg-blue-600 text-white text-xs px-2 py-1 rounded">xs</button>
<button class="bg-blue-600 text-white text-xl px-6 py-3 rounded">xl</button>

按钮禁用状态

<button disabled class="bg-blue-600 text-white px-4 py-2 rounded-lg opacity-50 cursor-not-allowed">禁用按钮</button>

按钮加载状态

<button class="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg opacity-70 cursor-wait">
  <i class="fas fa-spinner animate-spin"></i>加载中...
</button>

按钮悬浮动效

<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:scale-105 transition-transform">放大效果</button>
<button class="relative overflow-hidden group bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 py-2 rounded-lg">
  <span class="relative z-10">流光效果</span>
  <span class="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-500 bg-white/20"></span>
</button>

🚀 Card 卡片案例

Card 卡片案例

Tailwind 实战指南

掌握现代CSS框架，快速构建响应式界面，提升开发效率。

⭐ 4.8 · 1.2k 评价

现代设计系统

统一的设计语言，组件化开发，快速搭建美观应用。

⭐ 4.9 · 2.3k 评价

<!-- 卡片组件模板 -->
<div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl overflow-hidden border border-gray-700/50 hover:border-blue-500/50 transition-all hover:shadow-lg">
  <!-- 卡片头部图片区域 -->
  <div class="h-32 bg-gradient-to-r from-blue-600 to-purple-600 relative">
    <div class="absolute -bottom-4 left-4 w-12 h-12 bg-slate-800 rounded-xl border-2 border-blue-500 flex items-center justify-center">
      <i class="fas fa-code text-blue-400 text-lg"></i>
    </div>
  </div>
  <!-- 卡片内容区域 -->
  <div class="p-4 pt-6">
    <h4 class="font-bold text-white text-lg">卡片标题</h4>
    <p class="text-gray-400 text-sm mt-1">卡片描述文字</p>
    <div class="flex justify-between items-center mt-4">
      <span class="text-xs text-gray-500">⭐ 4.8 · 1.2k 评价</span>
      <button class="bg-blue-600 hover:bg-blue-500 text-white px-3 py-1 rounded-lg text-sm transition">查看详情</button>
    </div>
  </div>
</div>

💡 关键类：hover:border-* hover:shadow-* 实现悬停交互，absolute -bottom-4 实现头像覆盖效果

响应式卡片网格案例

快速启动

一键部署

安全可靠

企业级安全

云端同步

实时更新

<!-- 响应式卡片网格布局 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div class="bg-slate-800/50 rounded-lg p-4 text-center hover:bg-slate-800 transition">
    <i class="fas fa-rocket text-blue-400 text-2xl mb-2"></i>
    <h5 class="font-semibold">标题</h5>
    <p class="text-xs text-gray-400 mt-1">描述文字</p>
  </div>
  <!-- 更多卡片 -->
</div>

Card 现代浮动卡片

云存储

安全可靠的云端存储方案，随时随地访问您的文件。

了解更多 →New

<div class="group relative bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 hover:-translate-y-2 transition-all duration-300 shadow-lg hover:shadow-blue-500/20">
  <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mb-4">
    <i class="fas fa-cloud-upload-alt text-blue-400 text-xl"></i>
  </div>
  <h3 class="text-white text-xl font-bold">标题</h3>
  <p class="text-gray-400 text-sm mt-2">描述文字</p>
</div>

Card 横向图文卡片

设计系统完整指南

掌握现代设计系统的最佳实践，提升UI一致性。

⭐ 4.9📖 234页教程

<div class="flex flex-col sm:flex-row bg-slate-800/50 rounded-xl overflow-hidden">
  <div class="sm:w-1/3 h-40 bg-gradient-to-br from-blue-600 to-purple-600"></div>
  <div class="flex-1 p-5">
    <h3 class="text-white font-bold text-lg">标题</h3>
    <p class="text-gray-400 text-sm mt-1">描述</p>
  </div>
</div>

Card 悬停边框光效

快速启动项目

使用现代技术栈，快速搭建您的下一个项目。

<div class="group relative bg-slate-800 rounded-xl p-6 overflow-hidden border border-gray-700 hover:border-purple-500/50 transition-all">
  <div class="absolute inset-0 bg-gradient-to-r from-purple-500/0 via-purple-500/5 to-purple-500/0 opacity-0 group-hover:opacity-100"></div>
  <div class="relative">
    <i class="fas fa-rocket text-purple-400 text-xl"></i>
    <h3 class="text-white text-lg font-bold">标题</h3>
  </div>
</div>

Card 价格卡片含徽章

限时优惠

专业版

$49/月

✓ 无限项目
✓ 100GB存储
✓ 优先支持
✓ 高级分析

<div class="relative bg-gradient-to-b from-slate-800 to-slate-900 rounded-2xl p-6 border border-gray-700">
  <div class="absolute -top-2 right-4 bg-amber-500 text-black text-xs font-bold px-3 py-0.5 rounded-full">限时优惠</div>
  <h3 class="text-white text-lg font-bold">套餐名称</h3>
  <p class="text-3xl text-white font-bold mt-2">$49</p>
  <button class="mt-5 w-full bg-blue-600 text-white py-2 rounded-lg">立即订阅</button>
</div>

Card 用户评价卡片

★★★★★

"这个工具彻底改变了我的工作流程，强烈推荐给所有设计师！"

张伟

产品设计师

<div class="bg-slate-800/50 rounded-xl p-5 border border-gray-700">
  <div class="flex gap-1 text-yellow-400 mb-2">★★★★★</div>
  <p class="text-gray-300 text-sm italic">"评价内容"</p>
  <div class="flex items-center gap-3 mt-4">
    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></div>
    <div><h4 class="text-white text-sm font-semibold">姓名</h4></div>
  </div>
</div>

Card 博客文章卡片

教程

📅 2024-01-15⏱️ 5分钟阅读

Tailwind CSS 完全指南

从零开始掌握现代CSS框架，快速构建精美界面。

阅读更多 →#CSS #前端

<div class="bg-slate-800/50 rounded-xl overflow-hidden border border-gray-700">
  <div class="h-40 bg-gradient-to-r from-blue-600 to-cyan-600 relative">
    <div class="absolute top-3 left-3 bg-blue-500/80 text-white text-xs px-2 py-1 rounded">标签</div>
  </div>
  <div class="p-5">
    <h3 class="text-white font-bold text-lg">文章标题</h3>
    <p class="text-gray-400 text-sm mt-1">文章描述</p>
  </div>
</div>

Card 电商商品卡片

-20%

无线降噪耳机

高清音质，主动降噪

$199$249

<div class="group bg-slate-800/50 rounded-xl overflow-hidden border border-gray-700 hover:border-blue-500/50 transition-all">
  <div class="relative h-48 bg-gradient-to-br from-blue-700 to-purple-700">
    <div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">-20%</div>
  </div>
  <div class="p-4">
    <h3 class="text-white font-semibold">商品名称</h3>
    <div class="flex justify-between items-center mt-3">
      <span class="text-white text-xl font-bold">$199</span>
      <button class="bg-blue-600 text-white px-3 py-1.5 rounded-lg">购买</button>
    </div>
  </div>
</div>

登录表单案例

欢迎登录

邮箱

密码

记住我忘记密码?

还没有账号？立即注册

<!-- 登录表单组件 -->
<div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 border border-gray-700/50 max-w-md mx-auto">
  <h3 class="text-xl font-bold text-white text-center mb-6">欢迎登录</h3>
  <div class="space-y-4">
    <div>
      <label class="block text-sm text-gray-300 mb-1">邮箱</label>
      <input type="email" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-500">
    </div>
    <div>
      <label class="block text-sm text-gray-300 mb-1">密码</label>
      <input type="password" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-2 text-white">
    </div>
    <div class="flex items-center justify-between">
      <label class="flex items-center gap-2">
        <input type="checkbox" class="rounded text-blue-500"> 记住我
      </label>
      <a href="#" class="text-sm text-blue-400">忘记密码?</a>
    </div>
    <button class="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg">登录</button>
  </div>
</div>

Card 统计/指标卡片

总用户数

45,231

↑ 12.5%

总订单

2,345

↑ 8.2%

总销售额

¥128K

↑ 23%

转化率

24.8%

↓ 3.1%

<div class="grid grid-cols-2 gap-4">
  <div class="bg-gradient-to-r from-blue-600/20 to-blue-800/20 rounded-xl p-4">
    <p class="text-gray-400 text-xs">总用户数</p>
    <p class="text-white text-2xl font-bold">45,231</p>
    <p class="text-green-400 text-xs mt-1">↑ 12.5%</p>
  </div>
  <div class="bg-gradient-to-r from-purple-600/20 to-purple-800/20 rounded-xl p-4">
    <p class="text-gray-400 text-xs">总订单</p>
    <p class="text-white text-2xl font-bold">2,345</p>
    <p class="text-green-400 text-xs mt-1">↑ 8.2%</p>
  </div>
  <div class="bg-gradient-to-r from-emerald-600/20 to-emerald-800/20 rounded-xl p-4">
    <p class="text-gray-400 text-xs">总销售额</p>
    <p class="text-white text-2xl font-bold">¥128K</p>
    <p class="text-green-400 text-xs mt-1">↑ 23%</p>
  </div>
  <div class="bg-gradient-to-r from-amber-600/20 to-amber-800/20 rounded-xl p-4">
    <p class="text-gray-400 text-xs">转化率</p>
    <p class="text-white text-2xl font-bold">24.8%</p>
    <p class="text-red-400 text-xs mt-1">↓ 3.1%</p>
  </div>
</div>

📋 列表案例

列表基础列表

仪表板概览

查看关键指标和数据

用户管理

添加、编辑和删除用户

系统设置

配置系统参数

<div class="bg-slate-800/30 rounded-xl border border-gray-700 overflow-hidden">
  <div class="divide-y divide-gray-700">
    <div class="p-4 hover:bg-slate-800/50 transition">
      <p class="text-white text-sm">仪表板概览</p>
      <p class="text-gray-500 text-xs">查看关键指标和数据</p>
    </div>
    <div class="p-4 hover:bg-slate-800/50 transition">
      <p class="text-white text-sm">用户管理</p>
      <p class="text-gray-500 text-xs">添加、编辑和删除用户</p>
    </div>
    <div class="p-4 hover:bg-slate-800/50 transition">
      <p class="text-white text-sm">系统设置</p>
      <p class="text-gray-500 text-xs">配置系统参数</p>
    </div>
  </div>
</div>

列表带图标列表

数据统计

实时数据分析

团队协作

多人协作工具

云存储

安全云存储空间

<div class="bg-slate-800/30 rounded-xl border border-gray-700 overflow-hidden">
  <div class="divide-y divide-gray-700">
    <div class="flex items-center gap-3 p-4 hover:bg-slate-800/50 transition">
      <div class="w-8 h-8 bg-blue-600/20 rounded-lg flex items-center justify-center"><i class="fas fa-chart-line text-blue-400 text-sm"></i></div>
      <div>
        <p class="text-white text-sm">数据统计</p>
        <p class="text-gray-500 text-xs">实时数据分析</p>
      </div>
    </div>
    <div class="flex items-center gap-3 p-4 hover:bg-slate-800/50 transition">
      <div class="w-8 h-8 bg-purple-600/20 rounded-lg flex items-center justify-center"><i class="fas fa-users text-purple-400 text-sm"></i></div>
      <div>
        <p class="text-white text-sm">团队协作</p>
        <p class="text-gray-500 text-xs">多人协作工具</p>
      </div>
    </div>
    <div class="flex items-center gap-3 p-4 hover:bg-slate-800/50 transition">
      <div class="w-8 h-8 bg-emerald-600/20 rounded-lg flex items-center justify-center"><i class="fas fa-cloud text-emerald-400 text-sm"></i></div>
      <div>
        <p class="text-white text-sm">云存储</p>
        <p class="text-gray-500 text-xs">安全云存储空间</p>
      </div>
    </div>
  </div>
</div>

列表横向滚动列表

图片1

图片2

图片3

图片4

<div class="bg-slate-800/30 rounded-xl border border-gray-700 p-4">
  <div class="flex overflow-x-auto gap-3 pb-2">
    <div class="min-w-[120px] bg-slate-800 rounded-lg p-3 text-center border border-gray-700"><i class="fas fa-image text-gray-400 text-2xl mb-1"></i>
      <p class="text-white text-xs">图片1</p>
    </div>
    <div class="min-w-[120px] bg-slate-800 rounded-lg p-3 text-center border border-gray-700"><i class="fas fa-image text-gray-400 text-2xl mb-1"></i>
      <p class="text-white text-xs">图片2</p>
    </div>
    <div class="min-w-[120px] bg-slate-800 rounded-lg p-3 text-center border border-gray-700"><i class="fas fa-image text-gray-400 text-2xl mb-1"></i>
      <p class="text-white text-xs">图片3</p>
    </div>
    <div class="min-w-[120px] bg-slate-800 rounded-lg p-3 text-center border border-gray-700"><i class="fas fa-image text-gray-400 text-2xl mb-1"></i>
      <p class="text-white text-xs">图片4</p>
    </div>
  </div>
</div>

列表带操作按钮

项目文档.pdf

2.5 MB

设计稿.sketch

5.1 MB

演示视频.mp4

45.8 MB

<div class="bg-slate-800/30 rounded-xl border border-gray-700 overflow-hidden">
  <div class="divide-y divide-gray-700">
    <div class="flex justify-between items-center p-4 hover:bg-slate-800/50 transition">
      <div>
        <p class="text-white text-sm">项目文档.pdf</p>
        <p class="text-gray-500 text-xs">2.5 MB</p>
      </div>
      <div class="flex gap-2"><button class="text-blue-400 hover:text-blue-300 text-sm"><i class="fas fa-download"></i></button><button class="text-rose-400 hover:text-rose-300 text-sm"><i class="fas fa-trash"></i></button></div>
    </div>
    <div class="flex justify-between items-center p-4 hover:bg-slate-800/50 transition">
      <div>
        <p class="text-white text-sm">设计稿.sketch</p>
        <p class="text-gray-500 text-xs">5.1 MB</p>
      </div>
      <div class="flex gap-2"><button class="text-blue-400 hover:text-blue-300 text-sm"><i class="fas fa-download"></i></button><button class="text-rose-400 hover:text-rose-300 text-sm"><i class="fas fa-trash"></i></button></div>
    </div>
    <div class="flex justify-between items-center p-4 hover:bg-slate-800/50 transition">
      <div>
        <p class="text-white text-sm">演示视频.mp4</p>
        <p class="text-gray-500 text-xs">45.8 MB</p>
      </div>
      <div class="flex gap-2"><button class="text-blue-400 hover:text-blue-300 text-sm"><i class="fas fa-download"></i></button><button class="text-rose-400 hover:text-rose-300 text-sm"><i class="fas fa-trash"></i></button></div>
    </div>
  </div>
</div>

列表带状态标记

订单 #12452

2024-01-15

已完成

订单 #12451

2024-01-15

处理中

订单 #12450

2024-01-14

已取消

<div class="bg-slate-800/30 rounded-xl border border-gray-700 overflow-hidden">
  <div class="divide-y divide-gray-700">
    <div class="flex justify-between items-center p-4">
      <div>
        <p class="text-white text-sm">订单 #12452</p>
        <p class="text-gray-500 text-xs">2024-01-15</p>
      </div><span class="bg-emerald-600/20 text-emerald-400 text-xs px-2 py-1 rounded-full">已完成</span>
    </div>
    <div class="flex justify-between items-center p-4">
      <div>
        <p class="text-white text-sm">订单 #12451</p>
        <p class="text-gray-500 text-xs">2024-01-15</p>
      </div><span class="bg-amber-600/20 text-amber-400 text-xs px-2 py-1 rounded-full">处理中</span>
    </div>
    <div class="flex justify-between items-center p-4">
      <div>
        <p class="text-white text-sm">订单 #12450</p>
        <p class="text-gray-500 text-xs">2024-01-14</p>
      </div><span class="bg-rose-600/20 text-rose-400 text-xs px-2 py-1 rounded-full">已取消</span>
    </div>
  </div>
</div>

列表带搜索功能

用户：张三

zhang@example.com

用户：李四

li@example.com

用户：王五

wang@example.com

<div class="bg-slate-800/30 rounded-xl border border-gray-700 overflow-hidden">
  <div class="p-3 border-b border-gray-700">
    <div class="relative"><i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i><input type="text" placeholder="搜索..." class="w-full bg-slate-800/50 border border-gray-600 rounded-lg py-2 pl-9 pr-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"></div>
  </div>
  <div class="divide-y divide-gray-700 max-h-48 overflow-y-auto">
    <div class="p-3 hover:bg-slate-800/50">
      <p class="text-white text-sm">用户：张三</p>
      <p class="text-gray-500 text-xs">zhang@example.com</p>
    </div>
    <div class="p-3 hover:bg-slate-800/50">
      <p class="text-white text-sm">用户：李四</p>
      <p class="text-gray-500 text-xs">li@example.com</p>
    </div>
    <div class="p-3 hover:bg-slate-800/50">
      <p class="text-white text-sm">用户：王五</p>
      <p class="text-gray-500 text-xs">wang@example.com</p>
    </div>
  </div>
</div>

列表消息列表

张

张三10:30

下午的会议记得参加...

李

李四09:15

文件已经发送给你了...

王

王五昨天

周末一起去打球吗？...

<div class="bg-slate-800/30 rounded-xl border border-gray-700 overflow-hidden">
  <div class="divide-y divide-gray-700">
    <div class="flex gap-3 p-4 hover:bg-slate-800/50 transition">
      <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-bold">张</div>
      <div class="flex-1">
        <p class="flex justify-between"><span class="text-white text-sm">张三</span><span class="text-gray-500 text-xs">10:30</span></p>
        <p class="text-gray-400 text-xs mt-1">下午的会议记得参加...</p>
      </div>
    </div>
    <div class="flex gap-3 p-4 hover:bg-slate-800/50 transition">
      <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold">李</div>
      <div class="flex-1">
        <p class="flex justify-between"><span class="text-white text-sm">李四</span><span class="text-gray-500 text-xs">09:15</span></p>
        <p class="text-gray-400 text-xs mt-1">文件已经发送给你了...</p>
      </div>
    </div>
    <div class="flex gap-3 p-4 hover:bg-slate-800/50 transition">
      <div class="w-10 h-10 bg-emerald-600 rounded-full flex items-center justify-center text-white text-sm font-bold">王</div>
      <div class="flex-1">
        <p class="flex justify-between"><span class="text-white text-sm">王五</span><span class="text-gray-500 text-xs">昨天</span></p>
        <p class="text-gray-400 text-xs mt-1">周末一起去打球吗？...</p>
      </div>
    </div>
  </div>
</div>

列表多选列表

选项一：仪表板设计选项二：用户设置选项三：系统配置

已选择 0 项

<div class="bg-slate-800/30 rounded-xl border border-gray-700 overflow-hidden">
  <div class="divide-y divide-gray-700">
    <label class="flex items-center gap-3 p-4 cursor-pointer hover:bg-slate-800/50 transition"><input type="checkbox" class="rounded border-gray-600 text-blue-500 focus:ring-blue-500"><span class="text-white text-sm flex-1">选项一：仪表板设计</span></label>
    <label class="flex items-center gap-3 p-4 cursor-pointer hover:bg-slate-800/50 transition"><input type="checkbox" class="rounded border-gray-600 text-blue-500 focus:ring-blue-500"><span class="text-white text-sm flex-1">选项二：用户设置</span></label>
    <label class="flex items-center gap-3 p-4 cursor-pointer hover:bg-slate-800/50 transition"><input type="checkbox" class="rounded border-gray-600 text-blue-500 focus:ring-blue-500"><span class="text-white text-sm flex-1">选项三：系统配置</span></label>
    <div class="p-3 bg-slate-800/30 border-t border-gray-700 flex justify-between"><span class="text-gray-400 text-sm">已选择 0 项</span><button class="bg-blue-600 hover:bg-blue-500 text-white text-sm px-3 py-1 rounded-lg transition">确认</button></div>
  </div>
</div>

列表时间轴列表

项目启动

2024-01-01

项目立项会议，确定需求方向

设计阶段

2024-01-10

完成UI设计和原型图

开发完成

2024-01-25

项目进入测试阶段

格式化结果
<div class="bg-slate-800/30 rounded-xl border border-gray-700 p-4">
  <div class="relative pl-6 before:content-[''] before:absolute before:left-2 before:top-2 before:bottom-2 before:w-0.5 before:bg-blue-500/50">
    <div class="relative pb-6">
      <div class="absolute -left-6 top-0 w-3 h-3 bg-blue-500 rounded-full"></div>
      <p class="text-white text-sm font-semibold">项目启动</p>
      <p class="text-gray-500 text-xs">2024-01-01</p>
      <p class="text-gray-400 text-xs mt-1">项目立项会议，确定需求方向</p>
    </div>
    <div class="relative pb-6">
      <div class="absolute -left-6 top-0 w-3 h-3 bg-blue-500 rounded-full"></div>
      <p class="text-white text-sm font-semibold">设计阶段</p>
      <p class="text-gray-500 text-xs">2024-01-10</p>
      <p class="text-gray-400 text-xs mt-1">完成UI设计和原型图</p>
    </div>
    <div class="relative">
      <div class="absolute -left-6 top-0 w-3 h-3 bg-emerald-500 rounded-full"></div>
      <p class="text-white text-sm font-semibold">开发完成</p>
      <p class="text-gray-500 text-xs">2024-01-25</p>
      <p class="text-gray-400 text-xs mt-1">项目进入测试阶段</p>
    </div>
  </div>
</div>

列表网格卡片列表

项目文档

12个文件

设计资源

8个文件

视频素材

5个文件

音频文件

3个文件

代码仓库

24个文件

<div class="bg-slate-800/30 rounded-xl border border-gray-700 p-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
    <div class="bg-slate-800 rounded-lg p-3 border border-gray-700 hover:border-blue-500/50 transition"><i class="fas fa-folder text-blue-400 text-xl mb-2"></i>
      <h4 class="text-white text-sm font-semibold">项目文档</h4>
      <p class="text-gray-500 text-xs">12个文件</p>
    </div>
    <div class="bg-slate-800 rounded-lg p-3 border border-gray-700 hover:border-blue-500/50 transition"><i class="fas fa-image text-purple-400 text-xl mb-2"></i>
      <h4 class="text-white text-sm font-semibold">设计资源</h4>
      <p class="text-gray-500 text-xs">8个文件</p>
    </div>
    <div class="bg-slate-800 rounded-lg p-3 border border-gray-700 hover:border-blue-500/50 transition"><i class="fas fa-video text-emerald-400 text-xl mb-2"></i>
      <h4 class="text-white text-sm font-semibold">视频素材</h4>
      <p class="text-gray-500 text-xs">5个文件</p>
    </div>
    <div class="bg-slate-800 rounded-lg p-3 border border-gray-700 hover:border-blue-500/50 transition"><i class="fas fa-music text-amber-400 text-xl mb-2"></i>
      <h4 class="text-white text-sm font-semibold">音频文件</h4>
      <p class="text-gray-500 text-xs">3个文件</p>
    </div>
    <div class="bg-slate-800 rounded-lg p-3 border border-gray-700 hover:border-blue-500/50 transition"><i class="fas fa-code text-rose-400 text-xl mb-2"></i>
      <h4 class="text-white text-sm font-semibold">代码仓库</h4>
      <p class="text-gray-500 text-xs">24个文件</p>
    </div>
  </div>
</div>

📝 表单案例

表单登录表单

欢迎登录

邮箱

密码

记住我忘记密码?

还没有账号？立即注册

<div class="bg-slate-800/30 rounded-xl p-6 border border-gray-700 max-w-md mx-auto">
  <h3 class="text-white text-xl font-bold text-center mb-6">欢迎登录</h3>
  <div class="space-y-4">
    <div><label class="block text-sm text-gray-300 mb-1">邮箱</label><input type="email" placeholder="your@email.com" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"></div>
    <div><label class="block text-sm text-gray-300 mb-1">密码</label><input type="password" placeholder="••••••••" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"></div>
    <div class="flex items-center justify-between"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="rounded bg-slate-700 border-gray-600 text-blue-500 focus:ring-blue-500"><span class="text-sm text-gray-400">记住我</span></label><a href="#" class="text-sm text-blue-400 hover:text-blue-300">忘记密码?</a></div>
    <button class="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg transition font-medium">登录</button>
  </div>
  <p class="text-center text-xs text-gray-500 mt-4">还没有账号？<a href="#" class="text-blue-400 hover:text-blue-300">立即注册</a></p>
</div>

表单注册表单

创建账号

注册即表示同意服务条款

<div class="bg-slate-800/30 rounded-xl p-6 border border-gray-700 max-w-md mx-auto">
  <h3 class="text-white text-xl font-bold text-center mb-6">创建账号</h3>
  <div class="space-y-4">
    <div class="grid grid-cols-2 gap-3"><input type="text" placeholder="姓" class="bg-slate-700/50 border border-gray-600 rounded-lg px-3 py-2 text-white"><input type="text" placeholder="名" class="bg-slate-700/50 border border-gray-600 rounded-lg px-3 py-2 text-white"></div>
    <input type="email" placeholder="邮箱地址" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-2 text-white">
    <input type="password" placeholder="密码" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-2 text-white">
    <input type="password" placeholder="确认密码" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-2 text-white">
    <button class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white py-2 rounded-lg transition">注册账号</button>
  </div>
  <p class="text-center text-xs text-gray-500 mt-4">注册即表示同意<a href="#" class="text-blue-400">服务条款</a></p>
</div>

表单联系表单

联系我们

<div class="bg-slate-800/30 rounded-xl p-6 border border-gray-700 max-w-md mx-auto">
  <h3 class="text-white text-xl font-bold text-center mb-6">联系我们</h3>
  <div class="space-y-4">
    <div class="grid grid-cols-2 gap-3"><input type="text" placeholder="姓名" class="bg-slate-700/50 border border-gray-600 rounded-lg px-3 py-2 text-white"><input type="text" placeholder="公司" class="bg-slate-700/50 border border-gray-600 rounded-lg px-3 py-2 text-white"></div>
    <input type="email" placeholder="邮箱地址" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-2 text-white">
    <input type="text" placeholder="主题" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-2 text-white">
    <textarea rows="3" placeholder="留言内容..." class="w-full bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-2 text-white resize-none focus:outline-none focus:border-blue-500"></textarea>
    <button class="w-full bg-emerald-600 hover:bg-emerald-500 text-white py-2 rounded-lg transition">发送消息</button>
  </div>
</div>

表单搜索表单

<div class="flex flex-col sm:flex-row gap-3">
  <div class="relative flex-1">
    <i class="fas fa-search absolute left-3 top-1/2"></i>
    <input type="text" class="w-full bg-slate-700/50 border border-gray-600 rounded-lg py-2 pl-9">
  </div>
  <select><option>分类</option></select>
  <button>搜索</button>
</div>

表单评论表单

U

用户名刚刚

<div class="flex gap-3 mb-3">
  <div class="w-10 h-10 bg-blue-600 rounded-full"></div>
  <span>用户名</span>
</div>
<textarea rows="2" placeholder="写下你的评论..."></textarea>

表单带验证提示

用户名

✓ 用户名可用

邮箱

⚠ 请输入有效的邮箱地址

密码

🔒 密码需要至少8个字符

<div class="bg-slate-800/30 rounded-xl p-6 border border-gray-700 max-w-md mx-auto">
  <div class="space-y-4">
    <div><label class="block text-sm text-gray-300 mb-1">用户名</label><input type="text" value="zhang" class="w-full bg-slate-700/50 border border-green-500 rounded-lg px-4 py-2 text-white">
      <p class="text-xs text-green-400 mt-1">✓ 用户名可用</p>
    </div>
    <div><label class="block text-sm text-gray-300 mb-1">邮箱</label><input type="email" value="invalid-email" class="w-full bg-slate-700/50 border border-rose-500 rounded-lg px-4 py-2 text-white">
      <p class="text-xs text-rose-400 mt-1">⚠ 请输入有效的邮箱地址</p>
    </div>
    <div><label class="block text-sm text-gray-300 mb-1">密码</label><input type="password" class="w-full bg-slate-700/50 border border-amber-500 rounded-lg px-4 py-2 text-white">
      <p class="text-xs text-amber-400 mt-1">🔒 密码需要至少8个字符</p>
    </div><button class="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg transition">提交</button>
  </div>
</div>

表单悬浮标签表单

用户名

邮箱地址

密码

<div class="relative">
  <input type="text" placeholder=" " class="peer w-full bg-transparent border border-gray-600 rounded-lg px-4 pt-5 pb-2">
  <label class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 transition-all peer-focus:top-2 peer-focus:text-xs">标签</label>
</div>

表单多步骤表单

1

账号

2

资料

3

完成

<div class="flex justify-between mb-6">
  <div class="flex-1 text-center">
    <div class="w-8 h-8 mx-auto bg-blue-600 rounded-full">1</div>
  </div>
</div>

表单文件上传表单

拖拽文件到此处或点击上传

支持 JPG, PNG, PDF 格式

example.jpg

2.3 MB

<div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center hover:border-blue-500">
  <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
  <p>拖拽文件到此处或点击上传</p>
</div>

表单现代化订阅表单

订阅我们的资讯

获取最新产品动态、设计资源和优惠信息

我们尊重您的隐私，绝不滥发邮件。随时可以取消订阅。

<div class="flex flex-col sm:flex-row gap-3">
  <input type="email" placeholder="您的邮箱地址" class="flex-1 bg-slate-700/50 border border-gray-600 rounded-lg px-4 py-3">
  <button class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-3 rounded-lg">立即订阅</button>
</div>

📊 表格案例

表格基础表格

姓名	职位	部门	状态
张三	前端开发	技术部	在职
李四	UI设计	设计部	在职
王五	产品经理	产品部	试用期

<table class="w-full text-sm">
  <thead class="bg-slate-800/50"><tr><th class="px-4 py-3 text-left">标题</th></tr></thead>
  <tbody class="divide-y divide-gray-700"><tr><td class="px-4 py-3">内容</td></tr></tbody>
</table>

表格斑马纹表格

ID	名称	价格	库存
1	笔记本	¥2999	45
2	鼠标	¥99	128
3	键盘	¥399	67

<tr class="even:bg-slate-800/30">偶数行背景</tr>
<tr class="odd:bg-slate-800/20">奇数行背景</tr>

表格悬停高亮

用户	邮箱	角色	最后登录
张三	zhang@example.com	管理员	2024-01-15
李四	li@example.com	编辑	2024-01-14
王五	wang@example.com	普通用户	2024-01-13

<tr class="hover:bg-slate-800/40 transition">鼠标悬停高亮</tr>

表格带操作按钮

订单号	金额	状态	操作
#12452	¥299	已完成
#12451	¥158	处理中

<td class="px-4 py-3">
  <div class="flex gap-2">
    <button class="text-blue-400"><i class="fas fa-eye"></i></button>
  </div>
</td>

表格可排序列

姓名	分数	等级
张三	95	优秀
李四	78	良好
王五	62	及格

<th class="cursor-pointer hover:text-white">列名 <i class="fas fa-arrow-up text-xs"></i></th>

表格紧凑风格

#	代码	名称	数量
01	P-001	商品A	100
02	P-002	商品B	250
03	P-003	商品C	75

<table class="w-full text-xs">
  <th class="px-3 py-2">标题</th>
  <td class="px-3 py-2">内容</td>

表格多选列表

	姓名	邮箱
	张三	zhang@example.com
	李四	li@example.com
	王五	wang@example.com

<th><input type="checkbox" class="rounded border-gray-600 text-blue-500"></th>
<td><input type="checkbox" class="rounded border-gray-600 text-blue-500"></td>

表格响应式卡片

姓名张三邮箱zhang@example.com

姓名李四邮箱li@example.com

姓名	邮箱
张三	zhang@example.com
李四	li@example.com

<div class="block sm:hidden">手机卡片视图</div>
<table class="hidden sm:table">桌面表格视图</table>

表格进度条

项目	进度	状态
官网改版	75%	进行中
移动端开发	100%	已完成

<td>
  <div class="flex items-center gap-2">
    <div class="w-32 h-2 bg-gray-700 rounded-full overflow-hidden">
      <div class="h-full bg-blue-500 rounded-full" style="width:75%"></div>
    </div>
    <span>75%</span>
  </div>
</td>

表格带头像

成员	角色	项目数	加入时间
张张三 zhang@example.com	前端负责人	12	2023-01-10
李李四 li@example.com	UI设计师	8	2023-03-15
王王五 wang@example.com	后端开发	15	2023-02-20

<td>
  <div class="flex items-center gap-3">
    <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center">张</div>
    <div><p>姓名</p><p class="text-gray-500 text-xs">邮箱</p></div>
  </div>
</td>

🔲 边框案例

边框基础边框

蓝色边框

紫色边框

绿色边框

橙色边框

<div class="border border-blue-500 rounded-lg p-4">蓝色边框</div>

边框圆角样式

rounded-none

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-full

<div class="rounded-none">无圆角</div>
<div class="rounded-md">中等圆角</div>
<div class="rounded-full">胶囊形状</div>

边框单边边框

border-t-2

border-b-2

border-l-2

border-r-2

<div class="border-t-2 border-blue-500">上边框</div>
<div class="border-l-4 border-purple-500">左边框</div>

边框虚线样式

border-dashed

border-dotted

border-double

border-4

<div class="border-2 border-dashed border-blue-500">虚线边框</div>
<div class="border-2 border-dotted border-purple-500">点状边框</div>

边框渐变边框

渐变边框效果

绿蓝渐变边框

暖色渐变边框

<div class="relative p-[2px] rounded-lg bg-gradient-to-r from-blue-500 to-purple-500">
  <div class="bg-slate-800 rounded-lg p-4">内容</div>
</div>

边框发光效果

发光蓝边框

发光紫边框

发光绿边框

<div class="border-2 border-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]">发光边框</div>

边框悬浮效果

悬停变蓝

悬停加阴影

悬停放大

<div class="border border-gray-600 hover:border-blue-500 transition-colors">悬停变蓝</div>
<div class="border hover:border-purple-500 hover:shadow-lg transition-all">悬停加阴影</div>

边框多彩组合

左上彩色

右上彩色

左下彩色

<div class="border-t-4 border-blue-500 border-l-4 border-purple-500">多色组合边框</div>

边框内凹效果

内阴影边框

粗边内阴影

蓝色内阴影

<div class="border border-gray-600 shadow-inner">内阴影边框</div>
<div class="border border-blue-500 shadow-inner shadow-blue-500/20">彩色内阴影</div>

边框装饰样式

左侧强调边框

常用于重要通知或引用内容

成功提示边框

带有绿色强调边框

顶部强调边框

卡片顶部装饰边框

右侧强调边框

特殊的边框位置

<div class="relative border-l-4 border-blue-500 bg-slate-800/50 rounded-r-lg p-4">
  <p class="text-white text-sm font-semibold">左侧强调边框</p>
  <p class="text-gray-400 text-xs mt-1">描述文字</p>
</div>

🚀 Hero Section 案例

Hero 现代简约风

✨ 新产品发布

让设计更简单
让开发更高效

使用现代工具链，快速构建精美的网页应用，专注于创造而非配置。

<div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-8 text-center">
  <span class="inline-flex items-center bg-blue-500/20 text-blue-400 text-xs px-3 py-1 rounded-full">新产品发布</span>
  <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">让设计更简单<br>让开发更高效</h1>
  <p class="text-gray-400 max-w-md mx-auto">描述文字</p>
  <div class="flex flex-wrap justify-center gap-4 mt-8">
    <button class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2.5 rounded-lg">开始试用</button>
    <button class="border border-gray-600 hover:border-gray-500 text-gray-300 px-6 py-2.5 rounded-lg">查看演示</button>
  </div>
</div>

Hero 左右分屏风

构建更好的
数字体验

一站式解决方案，帮助团队更快地交付高质量产品。

可视化数据分析面板

<div class="flex flex-col md:flex-row items-center gap-8 bg-gradient-to-r from-slate-800 to-slate-900 rounded-2xl p-6">
  <div class="flex-1 text-center md:text-left">
    <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">标题</h1>
    <p class="text-gray-400 mb-6">描述文字</p>
    <button class="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded-lg">开始使用</button>
  </div>
  <div class="flex-1 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-xl p-6">内容区</div>
</div>

Hero 渐变背景动效风

🎉 限时优惠

创意无限
设计无界

加入数千名设计师，创造令人惊艳的作品

<div class="relative bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 rounded-2xl p-10 text-center overflow-hidden">
  <div class="absolute inset-0 bg-black/20"></div>
  <div class="relative">
    <span class="inline-block bg-white/20 backdrop-blur text-white text-xs px-3 py-1 rounded-full">标签</span>
    <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">主标题</h1>
    <button class="bg-white text-gray-900 hover:bg-gray-100 px-6 py-2.5 rounded-lg">按钮</button>
  </div>
</div>

Hero 科技感网格风

AI驱动的
智能平台

释放数据潜力，让决策更智能

<div class="relative bg-slate-900 rounded-2xl p-10 text-center border border-blue-500/30 overflow-hidden">
  <div class="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(59,130,246,0.1)_1px,transparent_1px)] bg-[size:40px_40px]"></div>
  <div class="relative">
    <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">标题</h1>
    <button class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2.5 rounded-lg">按钮</button>
  </div>
</div>

Hero 极简纯色风

Simplify

一个更智能的工作方式

<div class="bg-slate-800/30 rounded-2xl p-12 text-center">
  <h1 class="text-5xl md:text-6xl font-bold text-white mb-4 tracking-tight">Simplify</h1>
  <p class="text-gray-400 text-lg max-w-md mx-auto">描述文字</p>
  <div class="mt-8">
    <button class="bg-white text-gray-900 hover:bg-gray-100 px-8 py-3 rounded-full">探索产品 →</button>
  </div>
</div>

Hero 暗黑高级风

提升您的业务
到新的高度

专为企业级客户打造的高端解决方案

<div class="relative bg-gradient-to-b from-slate-800 to-slate-900 rounded-2xl p-10 text-center border border-gray-700 overflow-hidden">
  <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-blue-500 to-transparent"></div>
  <i class="fas fa-gem text-blue-400 text-4xl"></i>
  <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">标题</h1>
  <p class="text-gray-400 max-w-md mx-auto">描述文字</p>
  <button class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white px-6 py-2.5 rounded-lg">按钮</button>
</div>

🚀 Footer 页脚案例

Footer 简约版权

隐私政策服务条款联系我们

<div class="bg-slate-800/30 rounded-xl border border-gray-700/50">
  <div class="py-6 text-center">
    <p class="text-gray-400 text-sm">© 2024 公司名称。保留所有权利。</p>
    <div class="flex justify-center gap-4 mt-2">
      <a href="#" class="text-gray-500 hover:text-gray-300 text-xs">隐私政策</a>
    </div>
  </div>
</div>

Footer 多列导航

产品

公司

资源

法律

<div class="bg-slate-800/30 rounded-xl border border-gray-700/50 p-6">
  <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
    <div><h4 class="text-white font-semibold mb-3">产品</h4>
      <ul class="space-y-2 text-sm"><li><a href="#" class="text-gray-400 hover:text-white">功能</a></li></ul>
    </div>
  </div>
</div>

Footer 社交媒体风格

Brand

<div class="bg-slate-800/30 rounded-xl border border-gray-700/50 p-6">
  <div class="flex flex-col md:flex-row justify-between items-center gap-4">
    <div class="flex items-center gap-2">
      <div class="w-8 h-8 bg-blue-600 rounded-lg"></div>
      <span class="text-white font-bold text-lg">Brand</span>
    </div>
    <div class="flex gap-4">
      <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-twitter text-xl"></i></a>
    </div>
  </div>
</div>

Footer 暗黑科技风

TechCorp

创新科技，驱动未来。

产品

公司

支持

隐私政策 Cookie政策

<div class="relative bg-gradient-to-b from-slate-800 to-slate-900 rounded-xl border border-blue-500/20 p-6 overflow-hidden">
  <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(59,130,246,0.1),transparent)]"></div>
  <div class="relative grid grid-cols-1 md:grid-cols-4 gap-6">内容</div>
</div>

Footer 邮件订阅风

订阅我们的资讯

获取最新产品动态和优惠信息

我们尊重您的隐私，绝不滥发邮件。

<div class="bg-slate-800/30 rounded-xl border border-gray-700/50 p-6">
  <div class="text-center max-w-md mx-auto">
    <h3 class="text-white font-bold text-lg mb-2">订阅我们的资讯</h3>
    <div class="flex flex-col sm:flex-row gap-2">
      <input type="email" placeholder="您的邮箱地址" class="flex-1 bg-slate-800 border border-gray-600 rounded-lg px-4 py-2">
      <button class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2 rounded-lg">订阅</button>
    </div>
  </div>
</div>

Footer 全功能企业级

Enterprise

为企业数字化转型提供全方位解决方案

产品

公司

资源

法律

<div class="bg-gradient-to-b from-slate-800 to-slate-900 rounded-xl border border-gray-700 p-6">
  <div class="grid grid-cols-2 md:grid-cols-5 gap-6">多列导航</div>
  <div class="border-t border-gray-800 mt-6 pt-4 flex flex-col md:flex-row justify-between">
    <div class="flex gap-4"><a href="#"><i class="fab fa-twitter"></i></a></div>
  </div>
</div>

🚀 Sidebar 侧边栏案例

Sidebar 极简导航

<div class="flex gap-4">
  <div class="w-48 bg-slate-800/50 rounded-xl p-4 border border-gray-700">
    <nav class="space-y-2">
      <a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-300 hover:bg-blue-600/20 hover:text-blue-400 rounded-lg">
        <i class="fas fa-home w-5"></i><span>首页</span>
      </a>
    </nav>
  </div>
</div>

Sidebar 图标+徽章

U

用户名

user@example.com

邮件列表区域

<div class="w-52 bg-slate-800/50 rounded-xl p-4 border border-gray-700">
  <a href="#" class="flex items-center justify-between px-3 py-2 text-gray-300 hover:bg-blue-600/10 rounded-lg">
    <div class="flex items-center gap-3"><i class="fas fa-inbox"></i><span>收件箱</span></div>
    <span class="bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">12</span>
  </a>
</div>

Sidebar 折叠式

悬停左侧侧边栏展开

<div class="w-16 group hover:w-52 transition-all duration-300 bg-slate-800/50 rounded-xl p-3 border border-gray-700 overflow-hidden">
  <a href="#" class="flex items-center gap-3 text-gray-300 hover:text-blue-400">
    <i class="fas fa-home w-5"></i>
    <span class="hidden group-hover:inline">首页</span>
  </a>
</div>

Sidebar 暗黑仪表盘

Dashboard

退出登录

仪表盘内容区域

<div class="w-56 bg-gradient-to-b from-slate-800 to-slate-900 rounded-xl p-4 border border-gray-700">
  <nav class="space-y-1">
    <a href="#" class="flex items-center gap-3 px-3 py-2 bg-blue-600/20 text-blue-400 rounded-lg">
      <i class="fas fa-tachometer-alt"></i><span>仪表盘</span>
    </a>
  </nav>
  <div class="mt-6 pt-3 border-t border-gray-700">
    <a href="#" class="flex items-center gap-3 px-3 py-2 text-gray-400 hover:bg-gray-800 rounded-lg">
      <i class="fas fa-sign-out-alt"></i><span>退出登录</span>
    </a>
  </div>
</div>

Sidebar 二级菜单

电商管理

内容区域 - 商品列表

<div class="group">
  <a href="#" class="flex items-center justify-between px-3 py-2 text-gray-300 hover:bg-blue-600/10 rounded-lg">
    <div class="flex items-center gap-3"><i class="fas fa-box"></i><span>商品</span></div>
    <i class="fas fa-chevron-down text-xs"></i>
  </a>
  <div class="ml-8 mt-1 space-y-1 hidden group-hover:block">
    <a href="#" class="block px-3 py-1 text-sm text-gray-400 hover:text-blue-400">商品列表</a>
  </div>
</div>

Sidebar 渐变卡片+提示

Alex Chen

Pro Plan · 使用中

升级到专业版

解锁更多高级功能

主内容区域

<div class="w-60 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-4 border border-gray-700">
  <div class="mt-6 p-3 bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-xl border border-blue-500/30">
    <div class="flex items-center gap-2"><i class="fas fa-gem text-blue-400"></i><span class="text-white text-sm">升级到专业版</span></div>
    <button class="mt-2 w-full bg-blue-600 text-white text-xs py-1.5 rounded-lg">立即升级</button>
  </div>
</div>

🚀 Modal 弹窗案例

Modal 简约居中弹窗

点击右侧"预览"按钮查看弹窗效果

<!-- 简约居中弹窗结构 -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-2xl p-6 max-w-md w-full mx-4">
    <h3 class="text-white text-xl font-bold mb-2">弹窗标题</h3>
    <p class="text-gray-400 text-sm">这里是弹窗内容...</p>
    <div class="flex justify-end gap-3 mt-6">
      <button class="px-4 py-2 border border-gray-600 text-gray-300 rounded-lg">取消</button>
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">确认</button>
    </div>
  </div>
</div>

Modal 表单弹窗

点击右侧"预览"按钮查看表单弹窗效果

<!-- 表单弹窗结构 -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-2xl p-6 max-w-md w-full mx-4">
    <h3 class="text-white text-xl font-bold mb-4">编辑资料</h3>
    <div class="space-y-4">
      <input type="text" placeholder="姓名" class="w-full bg-slate-700 border border-gray-600 rounded-lg px-4 py-2">
      <input type="email" placeholder="邮箱" class="w-full bg-slate-700 border border-gray-600 rounded-lg px-4 py-2">
    </div>
    <div class="flex justify-end gap-3 mt-6">
      <button class="px-4 py-2 border border-gray-600 text-gray-300 rounded-lg">取消</button>
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">保存</button>
    </div>
  </div>
</div>

Modal 确认对话框

点击右侧"预览"按钮查看确认对话框效果

<!-- 确认对话框结构 -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-2xl p-6 max-w-sm w-full mx-4 text-center">
    <div class="w-14 h-14 mx-auto bg-red-500/20 rounded-full flex items-center justify-center mb-4">
      <i class="fas fa-exclamation-triangle text-red-400 text-2xl"></i>
    </div>
    <h3 class="text-white text-xl font-bold mb-2">确认删除</h3>
    <p class="text-gray-400 text-sm">此操作不可撤销，确定要删除吗？</p>
    <div class="flex gap-3 mt-6">
      <button class="flex-1 px-4 py-2 border border-gray-600 text-gray-300 rounded-lg">取消</button>
      <button class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg">删除</button>
    </div>
  </div>
</div>

Modal 大尺寸内容

点击右侧"预览"按钮查看大尺寸弹窗效果

<!-- 大尺寸内容弹窗 -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="bg-slate-800 rounded-2xl p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-white text-xl font-bold">详细内容</h3>
      <button class="text-gray-400 hover:text-white"><i class="fas fa-times"></i></button>
    </div>
    <div class="bg-slate-700/30 rounded-lg p-4 mb-4">内容区域...</div>
    <div class="flex justify-end gap-3">
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">确认</button>
    </div>
  </div>
</div>

Modal 底部操作按钮

点击右侧"预览"按钮查看底部按钮弹窗效果

<!-- 底部按钮弹窗 -->
<div class="fixed inset-x-0 bottom-0 z-50">
  <div class="bg-slate-800 rounded-t-2xl p-6 max-w-lg mx-auto">
    <h3 class="text-white text-lg font-bold mb-2">选择操作</h3>
    <p class="text-gray-400 text-sm mb-4">请选择您要执行的操作</p>
    <div class="space-y-2">
      <button class="w-full bg-slate-700 hover:bg-slate-600 text-white py-3 rounded-lg">拍照</button>
      <button class="w-full bg-slate-700 hover:bg-slate-600 text-white py-3 rounded-lg">从相册选择</button>
      <button class="w-full text-gray-400 py-3 rounded-lg">取消</button>
    </div>
  </div>
</div>

Modal 暗黑高级弹窗

点击右侧"预览"按钮查看暗黑高级弹窗效果

<!-- 暗黑高级弹窗 -->
<div class="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50">
  <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 max-w-md w-full mx-4 border border-blue-500/30">
    <div class="w-12 h-12 mx-auto bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mb-4">
      <i class="fas fa-check text-white"></i>
    </div>
    <h3 class="text-white text-xl font-bold text-center mb-2">操作成功</h3>
    <p class="text-gray-400 text-center text-sm">您的设置已成功保存</p>
    <button class="w-full mt-6 bg-gradient-to-r from-blue-600 to-purple-600 text-white py-2.5 rounded-lg">完成</button>
  </div>
</div>

🚀 Pricing 定价方案案例

Pricing 标准三栏

基础版

适合个人开发者

¥29/月

✓ 5个项目
✓ 10GB存储空间
✓ 基础支持
✗ 高级分析
✗ 优先支持

最受欢迎

专业版

适合专业团队

¥99/月

✓ 无限项目
✓ 100GB存储空间
✓ 优先支持
✓ 高级分析
✓ API访问

企业版

适合大型企业

¥299/月

✓ 无限项目
✓ 1TB存储空间
✓ 24/7专属支持
✓ 高级分析+AI
✓ 定制开发

<!-- 标准三栏定价表 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-slate-800/50 rounded-xl p-5 text-center border border-gray-700">
        <h3 class="text-white text-lg font-bold">基础版</h3>
        <p><span class="text-3xl text-white font-bold">¥29</span><span class="text-gray-400">/月</span></p>
        <ul class="mt-4 space-y-2">
        <li>✓ 5个项目</li>
        </ul>
        <button class="mt-5 w-full border border-gray-600 py-2 rounded-lg">选择套餐</button>
        </div>
        </div>

Pricing 暗黑高级风

Starter

轻松开始

$19/月

✓ 10个用户

✓ 100GB存储

✓ 基础支持

Pro

专业团队首选

$49/月

✓ 无限用户

✓ 500GB存储

✓ 优先支持

✓ 高级分析

Enterprise

大型企业

定制

✓ 定制方案

✓ 专属支持

✓ SLA保障

<!-- 暗黑高级风定价表 -->
        <div class="bg-gradient-to-b from-amber-900/20 to-gray-900 rounded-2xl p-6 border border-amber-500/50 transform scale-105">
        <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-amber-500 text-black text-xs px-3 py-0.5 rounded-full">推荐</div>
        <h3 class="text-white text-xl font-bold">Pro</h3>
        <p><span class="text-4xl text-white font-bold">$49</span><span class="text-gray-500">/月</span></p>
        <button class="mt-5 w-full bg-amber-500 text-black font-semibold py-2.5 rounded-xl">立即订阅</button>
        </div>

Pricing 卡片叠加强调

免费

$0

永远免费

✓ 1个项目
✓ 5GB存储
✓ 社区支持

专业

$29/月

✓ 10个项目
✓ 50GB存储
✓ 邮件支持
✓ 高级功能

企业

$99

/月

✓ 无限项目
✓ 200GB存储
✓ 专属支持
✓ API访问

<!-- 卡片叠加强调风格 -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-0">
        <div class="bg-slate-800/30 p-5 rounded-l-xl">免费套餐</div>
        <div class="bg-gradient-to-b from-blue-900/30 to-slate-800 p-5 border-y border-blue-500 shadow-xl">
        <div class="absolute -top-2 bg-blue-500 text-white text-xs px-2 rounded-full">热门</div>
        </div>
        <div class="bg-slate-800/30 p-5 rounded-r-xl">企业套餐</div>
        </div>

Pricing 月度/年度切换

个人

$9/月

团队

$29/月

商业

$79/月

企业

定制

<!-- 月度/年度切换风格 -->
        <div class="flex justify-center gap-3">
        <button class="bg-blue-600 text-white px-4 py-1.5 rounded-full text-sm">月付</button>
        <button class="text-gray-400 px-4 py-1.5 rounded-full text-sm">年付</button>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">套餐卡片</div>

Pricing 极简风格

基础

$19

/月

10个项目
10GB存储

专业

$49

/月

无限项目
100GB存储
优先支持

企业

定制

联系销售

定制方案
专属支持

<!-- 极简风格定价表 -->
        <div class="flex flex-wrap justify-center gap-6">
        <div class="text-center min-w-[160px]">
        <h3 class="text-gray-400 text-sm uppercase tracking-wide">基础</h3>
        <p class="text-4xl text-white font-bold mt-2">$19</p>
        <button class="mt-4 text-blue-400 text-sm">了解更多 →</button>
        </div>
        </div>

🚀 Dashboard 面板案例

Dashboard 面板案例

欢迎回来，张三

以下是您本周的数据概览

张

总收入

¥45,231

↑ 12.5%

订单数

2,345

↑ 8.2%

用户数

+1,203

↑ 23.1%

转化率

24.8%

↓ 3.1%

销售趋势

近7天

一二三四五六日

Dashboard 深色专业风

Analytics Pro

欢迎回来 👋

李设计师

以下是您本周的设计数据

+32%

较上周增长

总浏览量

128.4K

点赞数

23.5K

下载量

8.2K

好评率

98.6%

访问趋势过去30天

设备占比

桌面端65%

移动端35%

<!-- 深色专业风 Dashboard 核心代码 -->
        <div class="bg-slate-900 rounded-xl border border-gray-700">
        <div class="bg-slate-800/80 px-5 py-3 flex justify-between items-center">
        <div class="flex items-center gap-2">
        <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg"></div>
        <span class="font-bold text-white">Analytics Pro</span>
        </div>
        <div class="flex items-center gap-4">
        <i class="fas fa-search text-gray-400"></i>
        <i class="fas fa-bell text-gray-400"></i>
        </div>
        </div>
        <div class="bg-gradient-to-r from-blue-600/20 to-purple-600/20 mx-5 mt-5 rounded-xl p-4">
        <div class="flex justify-between items-center">
        <div><p class="text-white text-xl font-bold">欢迎回来</p></div>
        <div class="text-right"><p class="text-blue-400 text-2xl font-bold">+32%</p></div>
        </div>
        </div>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 p-5">
        <div class="bg-slate-800/50 rounded-xl p-3">
        <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center"><i class="fas fa-eye text-blue-400"></i></div>
        <div><p class="text-white text-xl font-bold">128.4K</p></div>
        </div>
        </div>
        </div>
        </div>

Dashboard 电商风格

电商仪表板

实时销售数据

今日本周

销售额

¥128,430

↑ 15.3%

订单量

1,284

↑ 8.2%

客单价

¥342

↑ 5.1%

退款率

2.4%

↓ 0.8%

最新订单查看全部 →

#12452张三¥299已完成

#12451李四¥158处理中

#12450王五¥520已完成

<!-- 电商风格 Dashboard -->
        <div class="bg-gradient-to-r from-emerald-600/20 to-emerald-800/20 rounded-xl p-3 border-l-4 border-emerald-500">
        <p class="text-gray-400 text-xs">销售额</p>
        <p class="text-white text-xl font-bold">¥128,430</p>
        <p class="text-emerald-400 text-xs">↑ 15.3%</p>
        </div>
        <!-- 订单列表使用 flex justify-between 实现 -->

Dashboard 简约轻量风

分析概览

访问量

45.2K

↑ 12%

用户数

2,345

↑ 8%

跳出率

34.2%

↓ 5%

📊 今日实时活跃用户: 342

<!-- 简约轻量风 Dashboard -->
        <div class="bg-slate-800/50 rounded-xl">
        <div class="p-4 border-b border-gray-700"><h3 class="text-white font-semibold">分析概览</h3></div>
        <div class="grid grid-cols-3 gap-4 p-4">
        <div><p class="text-white text-2xl font-bold">45.2K</p></div>
        </div>
        </div>

Dashboard 社交媒体分析风

社交媒体分析

跨平台数据汇总

粉丝增长

+2,345

较上周 ↑ 12%

互动率

4.8%

高于行业平均

总曝光

128.4K

过去30天

<!-- 社交媒体 Dashboard -->
        <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl">
        <div class="flex justify-between items-center p-4">
        <div><h3 class="text-white font-bold">社交媒体分析</h3></div>
        <div class="flex gap-3"><i class="fab fa-twitter"></i></div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
        <div class="bg-slate-800/30 rounded-lg p-3 text-center">
        <p class="text-emerald-400 text-xl font-bold">+2,345</p>
        </div>
        </div>
        </div>

📱 响应式布局案例

响应式网格卡片

卡片1

响应式网格

卡片2

自适应排列

卡片3

列数变化

📱 手机1列 → 📟 平板2列 → 💻 桌面3列

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
  <!-- 手机1列，平板2列，桌面3列 -->
</div>

响应式导航栏

首页产品关于联系

<!-- 桌面端菜单 -->
<div class="hidden md:flex space-x-6">菜单项</div>
<!-- 移动端菜单 -->
<div class="md:hidden flex flex-col space-y-2">菜单项</div>

响应式侧边栏

主要内容区域

📱 手机端菜单横向 → 💻 桌面端侧边纵向

<div class="flex flex-col md:flex-row gap-4">
  <div class="md:w-48">侧边栏</div>
  <div class="flex-1">主内容</div>
</div>

响应式图片画廊

1:1

2:2

3:3

4:4

📱 手机2列 → 📟 平板3列 → 💻 桌面4列

<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
  <!-- 响应式图片网格 -->
</div>

响应式底部栏

隐私政策服务条款联系我们

<div class="flex flex-col sm:flex-row justify-between items-center gap-3">
  <span>版权信息</span>
  <div class="flex gap-4">链接</div>
  <div class="flex gap-2">社交图标</div>
</div>

响应式表格滚动

ID	名称	描述	状态
1	项目A	这是一个项目描述	活跃
2	项目B	项目B的描述信息	进行中

⬅️ 小屏时可水平滚动 ➡️

<div class="overflow-x-auto">
  <table class="min-w-[500px]">表格内容</table>
</div>

响应式仪表板

总收入

¥45,231

订单数

2,345

用户数

+1,203

转化率

24.8%

📊 图表区域

📋 最近活动

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">统计卡片</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">图表区域</div>

响应式卡片列表

张三

zhang@example.com

李四

li@example.com

王五

wang@example.com

<div class="flex flex-col sm:flex-row gap-3">
  <!-- 手机垂直排列，平板/桌面水平排列 -->
  <div class="flex-1 flex items-center gap-3">卡片内容</div>
</div>

响应式价格表

基础版

¥29

/月

专业版

¥99

/月

企业版

¥299

/月

<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
  <!-- 手机1列，桌面3列 -->
</div>

响应式瀑布流布局

特色内容
高度更高

卡片2

卡片3

卡片4

卡片5

卡片6

✨ 支持不同高度的瀑布流布局

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
  <div class="row-span-2">特色内容</div>
  <!-- 不同高度的卡片自动排列 -->
</div>

🎨 渐变背景案例

🎨 颜色使用案例

✍️ 文字排版案例

✨ 文字图标组合

〰️ 分割线案例

🏷️ 标签案例

🔘 按钮案例

🚀 Navbar 导航栏案例

🚀 Card 卡片案例

📋 列表案例

📝 表单案例

📊 表格案例

🔲 边框案例

🚀 Hero Section 案例

🚀 Footer 页脚案例

🚀 Sidebar 侧边栏案例

🚀 Modal 弹窗案例

🚀 Pricing 定价案例

🚀 Dashboard 面板案例

📱 响应式布局案例

🎨 CSS 属性实验室 + Tailwind 速查

🎨 渐变背景案例

渐变 蓝紫科技风

科技渐变背景

渐变 青绿自然风

自然生态渐变

渐变 日落暖色风

日落暖色渐变

渐变 深邃夜空风

深邃夜空渐变

渐变 糖果甜美风

糖果甜美渐变

渐变 黄金商务风

黄金商务渐变

渐变 对角线科技感

对角线科技渐变

渐变 磨砂玻璃效果

磨砂玻璃效果

渐变 多色网格混合

多色网格渐变

🎨 颜色使用案例

颜色 品牌主色展示

颜色 色阶渐变展示

颜色 文字颜色搭配

颜色 背景色卡片

颜色 透明度使用

颜色 边框颜色搭配

颜色 渐变背景组合

颜色 主题色应用

颜色 悬停颜色变化

颜色 完整色板参考

✍️ 文字排版案例

排版 渐变文字标题

渐变文字标题

排版 霓虹发光文字

霓虹发光

排版 超大粗体标题

BOLDIMPACT

排版 优雅衬线字体

Elegant Serif

排版 层级文字组合

现代设计的新趋势

排版 引用块样式

排版 代码块样式

排版 装饰下划线标题

特色标题

排版 字母间距大片

LUXURY

排版 Hero 标题组合

创造令人惊叹的数字体验

✨ 文字图标组合案例

图标+文字 按钮组合

图标+文字 菜单项

图标+文字 卡片标题

云存储

安全防护

快速部署

24h支持

图标+文字 统计数据

图标+文字 列表项

渐变蓝紫科技风

渐变青绿自然风

渐变日落暖色风

渐变深邃夜空风

渐变糖果甜美风

渐变黄金商务风

渐变对角线科技感

渐变磨砂玻璃效果

渐变多色网格混合

颜色品牌主色展示

颜色色阶渐变展示

颜色文字颜色搭配

颜色背景色卡片

颜色透明度使用

颜色边框颜色搭配

颜色渐变背景组合

颜色主题色应用

颜色悬停颜色变化

颜色完整色板参考

排版渐变文字标题

排版霓虹发光文字

排版超大粗体标题

BOLD
IMPACT

排版优雅衬线字体

排版层级文字组合

排版引用块样式

排版代码块样式

排版装饰下划线标题

排版字母间距大片

创造令人惊叹的
数字体验

图标+文字按钮组合

图标+文字菜单项

图标+文字卡片标题

图标+文字统计数据

图标+文字列表项

图标+文字社交链接

图标+文字通知徽章

图标+文字表单输入

图标+文字徽章标签

图标+文字页脚链接

分割线基础实线

分割线虚线风格

分割线带文字

分割线渐变风格

分割线带图标

分割线粗细变化

分割线彩色风格

分割线发光效果

分割线斜线风格

分割线动画效果

标签基础圆角标签

标签轮廓边框标签

标签圆角方形标签

标签圆点装饰标签

标签可关闭标签

标签带图标标签

标签渐变标签

标签大号标签

标签可点击标签

标签计数徽章

按钮基础风格

按钮边框风格

按钮渐变风格

按钮圆角风格

按钮阴影悬浮

按钮带图标按钮

按钮大小尺寸

按钮禁用状态

按钮加载状态

按钮悬浮动效