9/1/25About 24 min
第 6 章：实战项目
学习目标
- 使用 Tailwind CSS 构建响应式登录页面
- 开发现代化的个人作品集网站
- 创建电商产品卡片和购物车界面
- 实现复杂的仪表板布局设计
项目一：响应式登录页面
页面结构设计
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录 - Tailwind CSS</title>
<link href="./dist/output.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
<!-- 登录容器 -->
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<!-- 头部区域 -->
<div class="text-center">
<div class="mx-auto h-12 w-12 bg-blue-500 rounded-full flex items-center justify-center">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h2 class="mt-6 text-3xl font-bold text-gray-900">
登录您的账户
</h2>
<p class="mt-2 text-sm text-gray-600">
还没有账户？
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 transition-colors">
立即注册
</a>
</p>
</div>
<!-- 登录表单 -->
<form class="mt-8 space-y-6" action="#" method="POST">
<input type="hidden" name="remember" value="true">
<div class="space-y-4">
<!-- 邮箱输入 -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">
邮箱地址
</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
class="relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm transition-colors"
placeholder="请输入邮箱地址"
>
</div>
<!-- 密码输入 -->
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">
密码
</label>
<div class="relative">
<input
id="password"
name="password"
type="password"
autocomplete="current-password"
required
class="relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm transition-colors"
placeholder="请输入密码"
>
<button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center">
<svg class="h-5 w-5 text-gray-400 hover:text-gray-600 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
</button>
</div>
</div>
</div>
<!-- 记住我和忘记密码 -->
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
id="remember-me"
name="remember-me"
type="checkbox"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
>
<label for="remember-me" class="ml-2 block text-sm text-gray-700">
记住我
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 transition-colors">
忘记密码？
</a>
</div>
</div>
<!-- 登录按钮 -->
<div>
<button
type="submit"
class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
<svg class="h-5 w-5 text-blue-500 group-hover:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
</svg>
</span>
登录
</button>
</div>
<!-- 分割线 -->
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-gradient-to-br from-blue-50 to-indigo-100 text-gray-500">或使用第三方登录</span>
</div>
</div>
</div>
<!-- 社交登录 -->
<div class="mt-6 grid grid-cols-2 gap-3">
<button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 transition-colors">
<svg class="h-5 w-5 text-red-500" viewBox="0 0 24 24">
<path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
<span class="ml-2">Google</span>
</button>
<button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 transition-colors">
<svg class="h-5 w-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
<span class="ml-2">Facebook</span>
</button>
</div>
</form>
</div>
</div>
</body>
</html>响应式优化
<!-- 移动端优化版本 -->
<div class="min-h-screen bg-white lg:bg-gradient-to-br lg:from-blue-50 lg:to-indigo-100">
<!-- 移动端背景 -->
<div class="lg:hidden absolute inset-0 bg-gradient-to-br from-blue-500 to-indigo-600"></div>
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative z-10">
<div class="max-w-md w-full">
<!-- 移动端白色卡片 -->
<div class="bg-white lg:bg-transparent rounded-2xl lg:rounded-none shadow-xl lg:shadow-none p-8 lg:p-0">
<!-- 头部区域 - 移动端白色文字，桌面端深色文字 -->
<div class="text-center">
<div class="mx-auto h-12 w-12 bg-white lg:bg-blue-500 rounded-full flex items-center justify-center shadow-lg lg:shadow-none">
<svg class="h-6 w-6 text-blue-500 lg:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h2 class="mt-6 text-3xl font-bold text-gray-900">
登录您的账户
</h2>
<p class="mt-2 text-sm text-gray-600">
还没有账户？
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 transition-colors">
立即注册
</a>
</p>
</div>
<!-- 表单内容保持不变... -->
</div>
</div>
</div>
</div>项目二：个人作品集网站
整体布局结构
<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>张三 - 前端开发工程师</title>
<link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-white text-gray-900">
<!-- 导航栏 -->
<nav class="fixed w-full bg-white/90 backdrop-blur-sm border-b border-gray-100 z-50">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex-shrink-0">
<a href="#" class="text-xl font-bold text-gray-900 hover:text-blue-600 transition-colors">
张三
</a>
</div>
<!-- 桌面端菜单 -->
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#home" class="nav-link">首页</a>
<a href="#about" class="nav-link">关于</a>
<a href="#skills" class="nav-link">技能</a>
<a href="#portfolio" class="nav-link">作品</a>
<a href="#contact" class="nav-link">联系</a>
</div>
</div>
<!-- 移动端菜单按钮 -->
<div class="md:hidden">
<button class="mobile-menu-button text-gray-400 hover:text-gray-500">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</div>
<!-- 移动端菜单 -->
<div class="mobile-menu hidden md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
<a href="#home" class="mobile-nav-link">首页</a>
<a href="#about" class="mobile-nav-link">关于</a>
<a href="#skills" class="mobile-nav-link">技能</a>
<a href="#portfolio" class="mobile-nav-link">作品</a>
<a href="#contact" class="mobile-nav-link">联系</a>
</div>
</div>
</nav>
<!-- Hero 区域 -->
<section id="home" class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center px-4">
<div class="max-w-4xl mx-auto text-center">
<!-- 头像 -->
<div class="relative inline-block mb-8">
<img
src="https://via.placeholder.com/150"
alt="张三"
class="w-32 h-32 md:w-40 md:h-40 rounded-full border-4 border-white shadow-xl"
>
<div class="absolute -bottom-2 -right-2 w-8 h-8 bg-green-400 rounded-full border-4 border-white"></div>
</div>
<!-- 主标题 -->
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
你好，我是
<span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
张三
</span>
</h1>
<!-- 副标题 -->
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-2xl mx-auto">
专注于创建优雅、高效的用户界面和用户体验
</p>
<!-- 技能标签 -->
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="skill-tag">React</span>
<span class="skill-tag">Vue.js</span>
<span class="skill-tag">TypeScript</span>
<span class="skill-tag">Node.js</span>
<span class="skill-tag">Tailwind CSS</span>
</div>
<!-- CTA 按钮 -->
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#portfolio" class="btn-primary">
查看作品
<svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</a>
<a href="#contact" class="btn-secondary">
联系我
</a>
</div>
</div>
</section>
<!-- 关于区域 -->
<section id="about" class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="section-title">关于我</h2>
<p class="section-subtitle">了解我的背景和经历</p>
</div>
<div class="grid md:grid-cols-2 gap-12 items-center">
<!-- 左侧图片 -->
<div class="relative">
<img
src="https://via.placeholder.com/500x400"
alt="工作照"
class="rounded-lg shadow-2xl"
>
<div class="absolute -bottom-4 -right-4 w-24 h-24 bg-blue-500 rounded-lg opacity-20"></div>
</div>
<!-- 右侧内容 -->
<div class="space-y-6">
<h3 class="text-2xl font-semibold text-gray-900">
前端开发工程师
</h3>
<p class="text-gray-600 leading-relaxed">
拥有5年前端开发经验，专注于React和Vue.js生态系统。
热爱创造优雅的用户界面，追求代码质量和性能优化。
</p>
<p class="text-gray-600 leading-relaxed">
曾参与多个大型项目的开发，具备丰富的团队协作经验。
持续学习新技术，关注行业发展趋势。
</p>
<!-- 个人信息 -->
<div class="grid grid-cols-2 gap-4 pt-6">
<div>
<strong class="text-gray-900">姓名:</strong>
<span class="text-gray-600">张三</span>
</div>
<div>
<strong class="text-gray-900">邮箱:</strong>
<span class="text-gray-600">zhangsan@example.com</span>
</div>
<div>
<strong class="text-gray-900">电话:</strong>
<span class="text-gray-600">+86 138-0013-8000</span>
</div>
<div>
<strong class="text-gray-900">地址:</strong>
<span class="text-gray-600">北京市</span>
</div>
</div>
<div class="pt-6">
<a href="/resume.pdf" class="btn-primary" download>
下载简历
<svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 技能区域 -->
<section id="skills" class="py-20 bg-gray-50">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="section-title">专业技能</h2>
<p class="section-subtitle">我掌握的技术栈</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- 前端技能 -->
<div class="skill-category">
<div class="skill-icon bg-blue-500">
<svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
</svg>
</div>
<h3 class="skill-category-title">前端开发</h3>
<div class="space-y-4">
<div class="skill-item">
<div class="skill-item-header">
<span>JavaScript</span>
<span>90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-item-header">
<span>React</span>
<span>85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-item-header">
<span>Vue.js</span>
<span>80%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 80%"></div>
</div>
</div>
</div>
</div>
<!-- 后端技能 -->
<div class="skill-category">
<div class="skill-icon bg-green-500">
<svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
</svg>
</div>
<h3 class="skill-category-title">后端开发</h3>
<div class="space-y-4">
<div class="skill-item">
<div class="skill-item-header">
<span>Node.js</span>
<span>75%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 75%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-item-header">
<span>Express</span>
<span>70%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 70%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-item-header">
<span>MongoDB</span>
<span>65%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 65%"></div>
</div>
</div>
</div>
</div>
<!-- 工具技能 -->
<div class="skill-category">
<div class="skill-icon bg-purple-500">
<svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<h3 class="skill-category-title">开发工具</h3>
<div class="space-y-4">
<div class="skill-item">
<div class="skill-item-header">
<span>Git</span>
<span>85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-item-header">
<span>Docker</span>
<span>60%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 60%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-item-header">
<span>AWS</span>
<span>55%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 55%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>CSS 组件定义
@layer components {
/* 导航链接 */
.nav-link {
@apply text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium transition-colors;
}
.mobile-nav-link {
@apply text-gray-600 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium;
}
/* 按钮样式 */
.btn-primary {
@apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all;
}
.btn-secondary {
@apply inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all;
}
/* 技能标签 */
.skill-tag {
@apply px-3 py-1 bg-white text-gray-700 text-sm font-medium rounded-full shadow-sm border border-gray-200 hover:bg-blue-50 hover:text-blue-700 hover:border-blue-200 transition-all;
}
/* 章节标题 */
.section-title {
@apply text-3xl md:text-4xl font-bold text-gray-900 mb-4;
}
.section-subtitle {
@apply text-lg text-gray-600 max-w-2xl mx-auto;
}
/* 技能组件 */
.skill-category {
@apply bg-white p-8 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow;
}
.skill-icon {
@apply w-16 h-16 rounded-lg flex items-center justify-center mx-auto mb-6;
}
.skill-category-title {
@apply text-xl font-semibold text-gray-900 text-center mb-8;
}
.skill-item-header {
@apply flex justify-between text-sm font-medium text-gray-700 mb-2;
}
.skill-bar {
@apply w-full bg-gray-200 rounded-full h-2;
}
.skill-progress {
@apply bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full transition-all duration-500;
}
}项目三：电商产品卡片
产品卡片组件
<!-- 产品网格容器 -->
<div class="max-w-6xl mx-auto px-4 py-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- 产品卡片 -->
<div class="group bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<!-- 产品图片区域 -->
<div class="relative aspect-w-4 aspect-h-3 bg-gray-100 overflow-hidden">
<img
src="https://via.placeholder.com/300x225"
alt="苹果 iPhone 14 Pro"
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
loading="lazy"
>
<!-- 标签区域 -->
<div class="absolute top-3 left-3 flex flex-col space-y-2">
<span class="px-2 py-1 bg-red-500 text-white text-xs font-semibold rounded-full">
热销
</span>
<span class="px-2 py-1 bg-green-500 text-white text-xs font-semibold rounded-full">
-20%
</span>
</div>
<!-- 收藏按钮 -->
<button class="absolute top-3 right-3 p-2 bg-white/80 hover:bg-white rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-all duration-200">
<svg class="h-5 w-5 text-gray-600 hover:text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</button>
<!-- 快速查看按钮 -->
<div class="absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<button class="w-full py-2 bg-white/90 hover:bg-white text-gray-900 font-medium rounded-lg transition-colors">
快速查看
</button>
</div>
</div>
<!-- 产品信息区域 -->
<div class="p-4">
<!-- 品牌 -->
<p class="text-sm text-gray-500 mb-1">Apple</p>
<!-- 产品名称 -->
<h3 class="font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors">
iPhone 14 Pro 深空黑色 128GB
</h3>
<!-- 评分 -->
<div class="flex items-center space-x-2 mb-3">
<div class="flex items-center">
<!-- 5星评分 -->
<svg class="h-4 w-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="h-4 w-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="h-4 w-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="h-4 w-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="h-4 w-4 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
</div>
<span class="text-sm text-gray-500">(4.2)</span>
<span class="text-sm text-gray-400">•</span>
<span class="text-sm text-gray-500">128 评价</span>
</div>
<!-- 价格 -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2">
<span class="text-2xl font-bold text-gray-900">¥7,999</span>
<span class="text-sm text-gray-500 line-through">¥9,999</span>
</div>
<span class="text-sm text-green-600 font-medium">省 ¥2,000</span>
</div>
<!-- 颜色选择 -->
<div class="mb-4">
<p class="text-sm text-gray-700 mb-2">颜色</p>
<div class="flex space-x-2">
<button class="w-6 h-6 bg-gray-900 rounded-full border-2 border-gray-300 hover:border-gray-400 transition-colors"></button>
<button class="w-6 h-6 bg-blue-600 rounded-full border-2 border-transparent hover:border-gray-300 transition-colors"></button>
<button class="w-6 h-6 bg-purple-600 rounded-full border-2 border-transparent hover:border-gray-300 transition-colors"></button>
<button class="w-6 h-6 bg-yellow-400 rounded-full border-2 border-transparent hover:border-gray-300 transition-colors"></button>
</div>
</div>
<!-- 操作按钮 -->
<div class="flex space-x-2">
<button class="flex-1 py-2 px-3 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
加入购物车
</button>
<button class="p-2 border border-gray-300 hover:border-gray-400 rounded-lg transition-colors group">
<svg class="h-5 w-5 text-gray-600 group-hover:text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-2.5 5H17M7 13v8a2 2 0 002 2h6a2 2 0 002-2v-8m-8 0V9a2 2 0 012-2h4a2 2 0 012 2v4.01"/>
</svg>
</button>
</div>
</div>
</div>
<!-- 更多产品卡片... -->
</div>
</div>项目四：管理仪表板
仪表板布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理仪表板</title>
<link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
<div class="flex h-screen">
<!-- 侧边栏 -->
<div class="hidden md:flex md:w-64 md:flex-col">
<div class="flex flex-col flex-grow pt-5 bg-white border-r border-gray-200 overflow-y-auto">
<!-- Logo -->
<div class="flex items-center flex-shrink-0 px-4">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">D</span>
</div>
<span class="ml-3 text-xl font-semibold text-gray-900">Dashboard</span>
</div>
<!-- 导航菜单 -->
<nav class="mt-8 flex-1 px-2 space-y-1">
<a href="#" class="sidebar-link active">
<svg class="sidebar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v4H8V5z"/>
</svg>
概览
</a>
<a href="#" class="sidebar-link">
<svg class="sidebar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
</svg>
用户管理
</a>
<a href="#" class="sidebar-link">
<svg class="sidebar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
</svg>
订单管理
</a>
<a href="#" class="sidebar-link">
<svg class="sidebar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
数据分析
</a>
<a href="#" class="sidebar-link">
<svg class="sidebar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
设置
</a>
</nav>
</div>
</div>
<!-- 主内容区域 -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm border-b border-gray-200">
<div class="flex items-center justify-between px-4 py-4">
<!-- 左侧 -->
<div class="flex items-center">
<button class="md:hidden p-2 rounded-md text-gray-400 hover:text-gray-600 focus:outline-none">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<h1 class="ml-2 text-xl font-semibold text-gray-900">仪表板概览</h1>
</div>
<!-- 右侧 -->
<div class="flex items-center space-x-4">
<!-- 搜索 -->
<div class="hidden md:block relative">
<input
type="text"
placeholder="搜索..."
class="w-64 pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<div class="absolute inset-y-0 left-0 pl-3 flex items-center">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
</div>
<!-- 通知 -->
<button class="relative p-2 text-gray-400 hover:text-gray-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
<span class="absolute top-1 right-1 h-2 w-2 bg-red-500 rounded-full"></span>
</button>
<!-- 用户头像 -->
<div class="relative">
<button class="flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<img
class="h-8 w-8 rounded-full"
src="https://via.placeholder.com/32"
alt="用户头像"
>
</button>
</div>
</div>
</div>
</header>
<!-- 主要内容 -->
<main class="flex-1 overflow-y-auto p-6">
<!-- KPI 指标卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- 总用户数 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="p-3 bg-blue-100 rounded-full">
<svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
</svg>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">总用户数</p>
<p class="text-2xl font-bold text-gray-900">12,345</p>
<p class="text-sm text-green-600">
<span class="font-medium">+12%</span> 比上月
</p>
</div>
</div>
</div>
<!-- 总订单数 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="p-3 bg-green-100 rounded-full">
<svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
</svg>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">总订单数</p>
<p class="text-2xl font-bold text-gray-900">3,456</p>
<p class="text-sm text-green-600">
<span class="font-medium">+8%</span> 比上月
</p>
</div>
</div>
</div>
<!-- 总销售额 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="p-3 bg-yellow-100 rounded-full">
<svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/>
</svg>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">总销售额</p>
<p class="text-2xl font-bold text-gray-900">¥789,012</p>
<p class="text-sm text-red-600">
<span class="font-medium">-3%</span> 比上月
</p>
</div>
</div>
</div>
<!-- 平均订单价值 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="p-3 bg-purple-100 rounded-full">
<svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">平均订单价值</p>
<p class="text-2xl font-bold text-gray-900">¥228</p>
<p class="text-sm text-green-600">
<span class="font-medium">+5%</span> 比上月
</p>
</div>
</div>
</div>
</div>
<!-- 图表和表格区域 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- 销售趋势图 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900">销售趋势</h3>
<select class="text-sm border border-gray-300 rounded-md px-3 py-1">
<option>最近 7 天</option>
<option>最近 30 天</option>
<option>最近 90 天</option>
</select>
</div>
<!-- 这里通常会放置图表组件 -->
<div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
<p class="text-gray-500">图表区域</p>
</div>
</div>
<!-- 用户增长图 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900">用户增长</h3>
<div class="flex space-x-2">
<button class="text-sm bg-blue-100 text-blue-600 px-3 py-1 rounded-md">新用户</button>
<button class="text-sm bg-gray-100 text-gray-600 px-3 py-1 rounded-md">回访用户</button>
</div>
</div>
<div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
<p class="text-gray-500">图表区域</p>
</div>
</div>
</div>
<!-- 最近订单表格 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="px-6 py-4 border-b border-gray-200">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">最近订单</h3>
<a href="#" class="text-sm text-blue-600 hover:text-blue-500">查看全部</a>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">#12345</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/32" alt="">
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">张三</p>
<p class="text-sm text-gray-500">zhang@example.com</p>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥299</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">已完成</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-01-15</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-500">查看</button>
</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
</body>
</html>样式组件
@layer components {
.sidebar-link {
@apply group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors;
}
.sidebar-link.active {
@apply bg-blue-50 border-r-2 border-blue-500 text-blue-700;
}
.sidebar-icon {
@apply mr-3 h-5 w-5 flex-shrink-0;
}
}小结
通过这四个实战项目，你应该掌握了：
- 登录页面：响应式表单设计和用户体验优化
- 作品集网站：复杂布局和导航系统实现
- 电商卡片：产品展示和交互效果设计
- 管理仪表板：数据展示和后台界面构建
这些项目涵盖了Web开发中最常见的场景，帮助你将 Tailwind CSS 的理论知识转化为实际应用能力。