卡片悬浮展示 Tailwind网站组件

<section class="py-20 bg-black">
            <div class="max-w-6xl mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-16 text-white">精品系列</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="group cursor-pointer">
                        <div class="bg-white rounded-xl overflow-hidden transform group-hover:-translate-y-2 transition-transform duration-300 shadow-2xl">
                            <div class="h-64 bg-gradient-to-br from-gray-800 to-gray-600"></div>
                            <div class="p-6">
                                <h3 class="text-xl font-bold mb-2">极简笔记本</h3>
                                <p class="text-gray-600 mb-4">轻薄便携，性能强劲</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-2xl font-bold">¥6,999</span>
                                    <button class="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors">查看详情</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="group cursor-pointer">
                        <div class="bg-white rounded-xl overflow-hidden transform group-hover:-translate-y-2 transition-transform duration-300 shadow-2xl">
                            <div class="h-64 bg-gradient-to-br from-gray-700 to-gray-500"></div>
                            <div class="p-6">
                                <h3 class="text-xl font-bold mb-2">无线鼠标</h3>
                                <p class="text-gray-600 mb-4">人体工学设计，精准控制</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-2xl font-bold">¥299</span>
                                    <button class="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors">查看详情</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="group cursor-pointer">
                        <div class="bg-white rounded-xl overflow-hidden transform group-hover:-translate-y-2 transition-transform duration-300 shadow-2xl">
                            <div class="h-64 bg-gradient-to-br from-gray-600 to-gray-400"></div>
                            <div class="p-6">
                                <h3 class="text-xl font-bold mb-2">机械键盘</h3>
                                <p class="text-gray-600 mb-4">青轴手感，RGB背光</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-2xl font-bold">¥899</span>
                                    <button class="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors">查看详情</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>