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 Split Hero Section</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-900 flex h-screen overflow-hidden"> <!-- Left: Content Container --> <section class="w-full lg:w-1/2 p-10 md:p-24 flex items-center justify-center bg-white"> <div class="max-w-xl"> <div class="mb-4 inline-flex items-center space-x-2 px-3 py-1 bg-indigo-50 text-indigo-600 rounded-full text-xs font-black uppercase tracking-widest ring-1 ring-indigo-200"> <span class="relative flex h-2 w-2"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span> </span> <span>Version 4 Ready</span> </div> <h1 class="text-5xl md:text-7xl font-black text-slate-800 leading-tight mb-8 tracking-tighter">Your Projects, <span class="italic text-indigo-600 underline">Perfected.</span></h1> <p class="text-xl text-slate-500 mb-12 leading-relaxed font-bold max-w-lg italic">"A journey of a thousand miles begins with a single line of high-performance utility class."</p> <div class="flex flex-col sm:flex-row gap-4"> <button class="bg-indigo-600 text-white px-10 h-16 rounded-2xl font-black text-sm uppercase tracking-widest shadow-2xl shadow-indigo-100 hover:bg-slate-900 hover:-translate-y-1 transition active:translate-y-0">Deploy Hub</button> <button class="bg-white text-slate-400 border border-slate-200 px-10 h-16 rounded-2xl font-black text-sm uppercase tracking-widest hover:text-slate-900 transition active:scale-95">Docs Overview</button> </div> </div> </section> <!-- Right: Visual Container --> <section class="hidden lg:block w-1/2 bg-slate-900 relative"> <img class="h-full w-full object-cover opacity-60 mix-blend-luminosity grayscale group-hover:grayscale-0 transition-all duration-700" src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1920&q=80" alt="Team Work"> <div class="absolute inset-0 bg-gradient-to-tr from-indigo-900/60 to-transparent"></div> <!-- Decorative Floating Element --> <div class="absolute bottom-10 left-10 p-8 bg-white/10 backdrop-blur-3xl rounded-3xl border border-white/20 shadow-2xl max-w-xs group cursor-pointer hover:bg-white/20 transition-all"> <div class="h-14 w-14 bg-indigo-600 rounded-2xl flex items-center justify-center text-white mb-4 shadow-xl shadow-indigo-900/40 rotate-12 group-hover:rotate-0 transition-transform"> <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> </div> <p class="text-xs font-black text-white uppercase tracking-widest leading-loose mb-1">Impact Velocity</p> <p class="text-[10px] text-white/60 font-medium">Measure internal performance across global nodes in real-time with automated AI tracking.</p> </div> </section> </body> </html>
