雨天404 Tailwind网站组件

<section class="min-h-screen bg-gradient-to-b from-gray-400 to-gray-600 flex items-center justify-center text-white relative overflow-hidden"> <div class="absolute inset-0" id="rainE5F6G7H8"></div> <div class="text-center z-10"> <div class="text-7xl font-bold mb-6 opacity-80">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-600 hover:bg-blue-700 px-8 py-3 rounded text-lg font-semibold transition-colors"> 避雨回家 </button> </div> </section> <script>
var rainContainer = document.getElementById('rainE5F6G7H8');
            for (var i = 0; i < 50; i++) {
                var raindrop = document.createElement('div');
                raindrop.className = 'absolute w-0.5 h-8 bg-white opacity-60 rounded-full';
                raindrop.style.left = Math.random() * 100 + '%';
                raindrop.style.top = '-50px';
                raindrop.style.animationDelay = Math.random() * 2 + 's';
                raindrop.style.animation = 'fall 1s linear infinite';
                rainContainer.appendChild(raindrop);
            }
</script> <style>
@keyframes fall {
                to { transform: translateY(100vh); }
            }
</style>