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 Alternating Feature Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-white flex flex-col items-center min-h-screen pt-16 p-6 antialiased"> <div class="max-w-7xl w-full space-y-32 mb-32"> <!-- Row 1: Left Text, Right Image/Visual --> <div class="flex flex-col lg:flex-row items-center gap-16 lg:gap-24"> <div class="w-full lg:w-1/2 space-y-8"> <div class="space-y-4"> <span class="text-xs font-bold text-indigo-600 uppercase tracking-widest">Kinetic Protocols</span> <h2 class="text-4xl lg:text-5xl font-black text-slate-900 tracking-tighter">Distributed Synchronization</h2> </div> <p class="text-lg text-slate-500 leading-relaxed">Our mesh network achieves unprecedented synchronization by utilizing kinetic handshake protocols across regional hubs. Every node remains in perfect lock-step with the primary core.</p> <ul class="space-y-3"> <li class="flex items-center gap-3 text-sm font-bold text-slate-700"> <div class="h-1.5 w-1.5 bg-indigo-500 rounded-full"></div> 0ms latency between core clusters </li> <li class="flex items-center gap-3 text-sm font-bold text-slate-700"> <div class="h-1.5 w-1.5 bg-indigo-500 rounded-full"></div> Manual manifest priority options </li> </ul> </div> <div class="w-full lg:w-1/2"> <div class="relative group"> <div class="absolute -inset-4 bg-indigo-50 rounded-[3rem] -rotate-2 group-hover:rotate-0 transition-transform duration-500"></div> <div class="relative aspect-square bg-slate-900 rounded-[2.5rem] overflow-hidden shadow-2xl overflow-hidden shadow-indigo-100 flex items-center justify-center p-12"> <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=800&h=800&fit=crop" class="h-full w-full object-cover rounded-2xl opacity-40 group-hover:scale-105 transition-transform duration-700 shadow-2xl"> <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-24 w-24 bg-indigo-600 rounded-full blur-3xl animate-pulse"></div> </div> </div> </div> </div> <!-- Row 2: Right Text, Left Image/Visual --> <div class="flex flex-col flex-col-reverse lg:flex-row items-center gap-16 lg:gap-24"> <div class="w-full lg:w-1/2"> <div class="relative group"> <div class="absolute -inset-4 bg-emerald-50 rounded-[3rem] rotate-2 group-hover:rotate-0 transition-transform duration-500"></div> <div class="relative aspect-video bg-white rounded-[2.5rem] overflow-hidden shadow-2xl border border-slate-100 p-8 flex items-center justify-center"> <div class="w-full grid grid-cols-3 gap-4"> <div class="h-32 bg-slate-50 rounded-2xl animate-pulse"></div> <div class="h-32 bg-emerald-100 rounded-2xl animate-pulse delay-75"></div> <div class="h-32 bg-slate-50 rounded-2xl animate-pulse delay-150"></div> </div> </div> </div> </div> <div class="w-full lg:w-1/2 space-y-8"> <div class="space-y-4"> <span class="text-xs font-bold text-emerald-600 uppercase tracking-widest">Sovereign Logic</span> <h2 class="text-4xl lg:text-5xl font-black text-slate-900 tracking-tighter italic">Atomic Data Integrity.</h2> </div> <p class="text-lg text-slate-500 leading-relaxed font-medium italic">Every manifest is sealed using multi-cluster decentralized verification. This ensures that your sectoral results are atomic and verified within every single cycle.</p> <div class="pt-4"> <button class="inline-flex items-center gap-2 px-8 py-4 bg-slate-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-emerald-600 transition-all cursor-pointer shadow-xl shadow-slate-100 group"> Review Integrity Protocol <svg class="h-4 w-4 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg> </button> </div> </div> </div> </div> </body> </html>
