Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Animated Hero Section</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> <style> @keyframes slow-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animate-slow-pan { background-size: 200% 200%; animation: slow-pan 15s ease infinite; } </style> </head> <body class="bg-slate-900 overflow-hidden"> <section class="relative h-screen flex items-center justify-center p-8 overflow-hidden text-center antialiased"> <!-- Animated Gradient Background --> <div class="absolute inset-0 bg-gradient-to-br from-indigo-900 via-purple-900 to-rose-900 animate-slow-pan opacity-60"></div> <!-- Floating Kinetic Blobs --> <div class="absolute -top-40 -left-40 w-128 h-128 bg-indigo-500 rounded-full blur-[120px] opacity-20 animate-pulse transition-transform duration-[10s] hover:scale-150"></div> <div class="absolute -bottom-40 -right-40 w-128 h-128 bg-rose-500 rounded-full blur-[120px] opacity-20 animate-pulse delay-700 transition-transform duration-[10s] hover:scale-150"></div> <div class="relative z-10 max-w-5xl"> <!-- Animated Title with Staggered Fade In Concept --> <h1 class="text-6xl md:text-[10rem] font-black leading-none mb-10 tracking-[ -0.05em] text-white italic transition-all duration-1000 transform hover:scale-105 active:scale-95 cursor-default select-none group"> <span class="inline-block transition-transform duration-500 group-hover:-translate-y-4">M</span> <span class="inline-block transition-transform duration-500 delay-75 group-hover:-translate-y-4">O</span> <span class="inline-block transition-transform duration-500 delay-150 group-hover:-translate-y-4">T</span> <span class="inline-block transition-transform duration-500 delay-225 group-hover:-translate-y-4 text-rose-500 drop-shadow-2xl">I</span> <span class="inline-block transition-transform duration-500 delay-300 group-hover:-translate-y-4">O</span> <span class="inline-block transition-transform duration-500 delay-375 group-hover:-translate-y-4">N</span> </h1> <p class="text-xl md:text-2xl text-indigo-100/60 mb-16 leading-relaxed max-w-2xl mx-auto space-y-4"> <span class="block font-black uppercase tracking-[0.4em] text-xs mb-4 opacity-40">System Core 4.2.1</span> Everything is in movement. Leverage kinetic design to capture attention and direct user intention. </p> <div class="flex flex-col sm:flex-row items-center justify-center gap-8"> <button class="px-16 py-6 bg-white text-slate-900 rounded-full font-black text-sm uppercase tracking-widest shadow-[0_0_50px_rgba(255,255,255,0.4)] hover:-translate-y-1 transition-all active:translate-y-0">Activate Portal</button> <button class="px-16 py-6 bg-transparent text-white border-2 border-white/20 rounded-full font-black text-sm uppercase tracking-widest hover:bg-white/10 transition-all flex items-center gap-3"> <span class="h-2 w-2 rounded-full bg-rose-500 animate-ping"></span> Live Status </button> </div> </div> </section> </body> </html>
