第三章：组件开发实战 - 第一节 - Tailwind CSS 常用UI组件构建

<!-- 基础按钮 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    基础按钮
</button>

<!-- 轮廓按钮 -->
<button class="px-4 py-2 border border-blue-500 text-blue-500 rounded hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    轮廓按钮
</button>

<!-- 不同尺寸 -->
<button class="px-2 py-1 text-sm">小按钮</button>
<button class="px-6 py-3 text-lg">大按钮</button>

<!-- 禁用状态 -->
<button class="px-4 py-2 bg-gray-400 text-white rounded cursor-not-allowed" disabled>
    禁用按钮
</button>

<!-- 带图标的按钮 -->
<button class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded">
    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path d="M12 4v16m8-8H4"/>
    </svg>
    添加
</button>

<!-- 基础输入框 -->
<div class="space-y-2">
    <label class="block text-sm font-medium text-gray-700">
        用户名
    </label>
    <input type="text"
           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
           placeholder="请输入用户名">
</div>

<!-- 带图标的输入框 -->
<div class="relative">
    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
    </div>
    <input type="search"
           class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md"
           placeholder="搜索">
</div>

<!-- 基础选择框 -->
<select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

<!-- 自定义样式的选择框 -->
<div class="relative">
    <select class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-md bg-white">
        <option>选项1</option>
        <option>选项2</option>
    </select>
    <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
        <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M19 9l-7 7-7-7"/>
        </svg>
    </div>
</div>

<!-- 简单卡片 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="image.jpg" alt="Card image">
    <div class="p-6">
        <h3 class="text-xl font-semibold mb-2">卡片标题</h3>
        <p class="text-gray-600">卡片描述内容</p>
    </div>
</div>

<!-- 交互式卡片 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105">
    <!-- 卡片内容 -->
</div>

<!-- 产品卡片 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="relative">
        <img class="w-full h-48 object-cover" src="product.jpg" alt="Product">
        <div class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded">
            促销
        </div>
    </div>
    <div class="p-6">
        <h3 class="text-xl font-semibold mb-2">产品名称</h3>
        <p class="text-gray-600 mb-4">产品描述</p>
        <div class="flex items-center justify-between">
            <span class="text-xl font-bold text-blue-500">¥99.00</span>
            <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                加入购物车
            </button>
        </div>
    </div>
</div>

<!-- 响应式导航栏 -->
<nav class="bg-white shadow">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between h-16">
            <!-- Logo -->
            <div class="flex items-center">
                <img class="h-8 w-auto" src="logo.svg" alt="Logo">
            </div>

            <!-- 桌面端导航 -->
            <div class="hidden md:flex items-center space-x-4">
                <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2">首页</a>
                <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2">产品</a>
                <a href="#" class="text-gray-700 hover:text-gray-900 px-3 py-2">关于</a>
            </div>

            <!-- 移动端菜单按钮 -->
            <div class="md:hidden flex items-center">
                <button class="text-gray-700">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>

<!-- 侧边导航 -->
<div class="w-64 bg-gray-800 h-screen">
    <div class="flex items-center justify-center h-16 bg-gray-900">
        <span class="text-white text-lg font-semibold">控制面板</span>
    </div>

    <nav class="mt-4">
        <a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700">
            <svg class="h-5 w-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            仪表盘
        </a>
        <!-- 更多导航项 -->
    </nav>
</div>

<!-- 成功提示 -->
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4">
    <div class="flex items-center">
        <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M5 13l4 4L19 7"/>
        </svg>
        <span>操作成功！</span>
    </div>
</div>

<!-- 错误提示 -->
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
    <div class="flex items-center">
        <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path d="M6 18L18 6M6 6l12 12"/>
        </svg>
        <span>出现错误！</span>
    </div>
</div>

<!-- 模态框背景 -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
    <!-- 模态框内容 -->
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
        <!-- 头部 -->
        <div class="px-6 py-4 border-b">
            <h3 class="text-lg font-semibold">确认操作</h3>
        </div>

        <!-- 内容 -->
        <div class="px-6 py-4">
            <p>确定要执行此操作吗？</p>
        </div>

        <!-- 底部按钮 -->
        <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-4 rounded-b-lg">
            <button class="px-4 py-2 text-gray-600 hover:text-gray-700">
                取消
            </button>
            <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                确定
            </button>
        </div>
    </div>
</div>