海洋404 Tailwind网站组件

<section class="min-h-screen bg-gradient-to-b from-blue-400 via-blue-600 to-blue-800 flex items-center justify-center text-white relative overflow-hidden"> <div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-blue-900 to-transparent"></div> <div class="absolute inset-0" id="wavesG7H8I9J0"></div> <div class="text-center z-10"> <div class="text-8xl font-bold mb-6 text-blue-200">404</div> <h1 class="text-3xl md:text-5xl font-bold mb-6">沉入深海</h1> <p class="text-xl mb-8 max-w-md mx-auto">您要找的页面已经沉入了数据的深海中...</p> <button class="bg-blue-500 hover:bg-blue-600 border-2 border-white px-8 py-3 rounded-full text-lg font-semibold transition-colors"> 浮出水面 </button> </div> </section> <style>
#wavesG7H8I9J0::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 200%;
                height: 100px;
                background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
                animation: wave 3s ease-in-out infinite;
            }
            @keyframes wave {
                0%, 100% { transform: translateX(-50%) translateY(0px); }
                50% { transform: translateX(-50%) translateY(-20px); }
            }
</style>