太空迷失404 Tailwind网站组件

<section class="min-h-screen bg-gradient-to-b from-purple-900 via-blue-900 to-black flex items-center justify-center text-white relative overflow-hidden"> <div class="absolute inset-0" id="starsA1B2C3D4"></div> <div class="text-center z-10"> <div class="text-9xl font-bold mb-4 animate-pulse">404</div> <h1 class="text-4xl md:text-6xl font-bold mb-6">页面迷失在太空</h1> <p class="text-xl mb-8 max-w-md mx-auto">看起来您要找的页面已经飘向了宇宙深处...</p> <button class="bg-blue-600 hover:bg-blue-700 px-8 py-3 rounded-full text-lg font-semibold transition-colors"> 返回地球 </button> </div> <div class="absolute bottom-10 right-10 w-20 h-20 bg-white rounded-full animate-bounce opacity-80"></div> </section> <script>
var stars = document.getElementById('starsA1B2C3D4');
            for (var i = 0; i < 100; i++) {
                var star = document.createElement('div');
                star.className = 'absolute w-1 h-1 bg-white rounded-full';
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                star.style.animationDelay = Math.random() * 3 + 's';
                star.style.animation = 'twinkle 3s infinite';
                stars.appendChild(star);
            }
</script> <style>
@keyframes twinkle {
                0%, 100% { opacity: 0.3; }
                50% { opacity: 1; }
            }
</style>