分层阴影设计 Tailwind网站组件

<section class="bg-gray-50 py-20">
            <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-2xl transform translate-x-4 translate-y-4 shadow-lg"></div>
                    <div class="absolute inset-0 bg-purple-500 rounded-2xl transform translate-x-2 translate-y-2 shadow-lg"></div>
                    <div class="relative bg-white rounded-2xl p-12 shadow-xl">
                        <div class="text-center">
                            <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">层次美学</h1>
                            <p class="text-xl text-gray-600 mb-8">深度与维度的艺术表达</p>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <div class="bg-gray-100 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
                                    <h3 class="font-semibold text-gray-900 mb-2">第一层</h3>
                                    <p class="text-gray-600 text-sm">基础层次构建</p>
                                </div>
                                <div class="bg-gray-100 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
                                    <h3 class="font-semibold text-gray-900 mb-2">第二层</h3>
                                    <p class="text-gray-600 text-sm">中间层次增强</p>
                                </div>
                                <div class="bg-gray-100 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
                                    <h3 class="font-semibold text-gray-900 mb-2">第三层</h3>
                                    <p class="text-gray-600 text-sm">顶层视觉效果</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>