纸飞机404 Tailwind网站组件

<section class="min-h-screen bg-white flex items-center justify-center text-gray-800 relative overflow-hidden"> <div class="absolute top-20 left-10 w-20 h-1 bg-blue-200 rounded-full"></div> <div class="absolute top-40 right-20 w-32 h-1 bg-blue-200 rounded-full"></div> <div class="absolute bottom-32 left-1/4 w-16 h-1 bg-blue-200 rounded-full"></div> <div class="text-center z-10"> <div class="text-8xl font-bold mb-6 text-blue-500">404</div> <div class="mb-8" id="planeD4E5F6G7"> <div class="w-16 h-16 mx-auto bg-blue-500 transform rotate-45 relative"> <div class="absolute -top-2 -left-2 w-4 h-4 bg-blue-500 transform rotate-45"></div> <div class="absolute -bottom-2 -right-2 w-4 h-4 bg-blue-500 transform rotate-45"></div> </div> </div> <h1 class="text-3xl md:text-5xl font-bold mb-6 text-gray-800">页面飞走了</h1> <p class="text-xl mb-8 max-w-md mx-auto text-gray-600">看起来您要找的页面已经像纸飞机一样飞走了</p> <button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-full text-lg font-semibold transition-colors"> 折一个新的 </button> </div> </section> <style>
#planeD4E5F6G7 {
                animation: fly 3s ease-in-out infinite;
            }
            @keyframes fly {
                0%, 100% { transform: translateY(0px) rotate(0deg); }
                50% { transform: translateY(-20px) rotate(5deg); }
            }
</style>