音乐404 Tailwind网站组件

<section class="min-h-screen bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center text-white relative overflow-hidden"> <div class="absolute inset-0 opacity-20"> <div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-black to-transparent"></div> </div> <div class="text-center z-10"> <div class="text-8xl font-bold mb-6">♪ 404 ♪</div> <div class="flex justify-center mb-8" id="beatF6G7H8I9"> <div class="w-2 h-16 bg-white mx-1 rounded-full"></div> <div class="w-2 h-12 bg-white mx-1 rounded-full"></div> <div class="w-2 h-20 bg-white mx-1 rounded-full"></div> <div class="w-2 h-8 bg-white mx-1 rounded-full"></div> <div class="w-2 h-16 bg-white mx-1 rounded-full"></div> <div class="w-2 h-24 bg-white mx-1 rounded-full"></div> <div class="w-2 h-12 bg-white mx-1 rounded-full"></div> </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-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-full text-lg font-semibold transition-colors"> 重新播放 </button> </div> </section> <style>
#beatF6G7H8I9 div {
                animation: beat 1s ease-in-out infinite;
            }
            #beatF6G7H8I9 div:nth-child(1) { animation-delay: 0s; }
            #beatF6G7H8I9 div:nth-child(2) { animation-delay: 0.1s; }
            #beatF6G7H8I9 div:nth-child(3) { animation-delay: 0.2s; }
            #beatF6G7H8I9 div:nth-child(4) { animation-delay: 0.3s; }
            #beatF6G7H8I9 div:nth-child(5) { animation-delay: 0.4s; }
            #beatF6G7H8I9 div:nth-child(6) { animation-delay: 0.5s; }
            #beatF6G7H8I9 div:nth-child(7) { animation-delay: 0.6s; }
            @keyframes beat {
                0%, 100% { transform: scaleY(1); }
                50% { transform: scaleY(1.5); }
            }
</style>