糖果404 Tailwind网站组件

<section class="min-h-screen bg-gradient-to-br from-pink-300 via-purple-300 to-indigo-300 flex items-center justify-center text-white relative overflow-hidden">
            <div class="absolute inset-0 opacity-20">
                <div class="absolute top-20 left-20 w-8 h-8 bg-yellow-400 rounded-full"></div>
                <div class="absolute top-40 right-32 w-6 h-6 bg-green-400 rounded-full"></div>
                <div class="absolute bottom-32 left-1/4 w-10 h-10 bg-red-400 rounded-full"></div>
                <div class="absolute bottom-20 right-20 w-4 h-4 bg-blue-400 rounded-full"></div>
            </div>
            <div class="text-center z-10">
                <div class="text-8xl font-bold mb-6 text-pink-600">404</div>
                <div class="mb-8">
                    <div class="text-6xl">🍭</div>
                </div>
                <h1 class="text-3xl md:text-5xl font-bold mb-6 text-purple-800">糖果丢失了</h1>
                <p class="text-xl mb-8 max-w-md mx-auto text-purple-700">看起来您要找的甜蜜页面被小精灵吃掉了</p>
                <button class="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 px-8 py-3 rounded-full text-lg font-semibold transition-all transform hover:scale-105">
                    寻找更多糖果
                </button>
            </div>
        </section>