卡片式导航 Tailwind网站组件

<section class="bg-gray-100 py-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="relative">
                    <div class="absolute inset-0 bg-blue-500 rounded-3xl transform rotate-2 shadow-lg"></div>
                    <div class="absolute inset-0 bg-purple-500 rounded-3xl transform -rotate-1 shadow-lg"></div>
                    <div class="relative bg-white rounded-3xl p-8 shadow-xl">
                        <div class="flex flex-col md:flex-row justify-between items-center">
                            <div class="text-center md:text-left mb-6 md:mb-0">
                                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">多彩世界</h1>
                                <p class="text-gray-600">发现色彩的无限魅力</p>
                            </div>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <button class="bg-red-500 text-white px-4 py-2 rounded-xl hover:bg-red-600 transition-colors">红色</button>
                                <button class="bg-blue-500 text-white px-4 py-2 rounded-xl hover:bg-blue-600 transition-colors">蓝色</button>
                                <button class="bg-green-500 text-white px-4 py-2 rounded-xl hover:bg-green-600 transition-colors">绿色</button>
                                <button class="bg-yellow-500 text-white px-4 py-2 rounded-xl hover:bg-yellow-600 transition-colors">黄色</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>