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 Feature Grid</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center min-h-screen pt-16 p-6 antialiased"> <div class="max-w-7xl mx-auto space-y-16"> <div class="text-center space-y-4"> <span class="text-sm font-bold text-indigo-600 uppercase tracking-widest italic leading-tight">Sync Capabilities</span> <h2 class="text-4xl lg:text-5xl font-black text-slate-900 tracking-tighter leading-none">Global Neural Synchronicity</h2> <p class="max-w-2xl mx-auto text-lg text-slate-500 font-medium leading-relaxed">Unlock the full power of your distributed network with our comprehensive platform features.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-start"> <!-- Feature 1 --> <div class="bg-white p-10 rounded-[2.5rem] border border-slate-100 shadow-xl shadow-slate-200/50 hover:border-indigo-100 transition-colors group"> <div class="h-16 w-16 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center mb-10 group-hover:bg-indigo-600 group-hover:text-white transition-all shadow-lg shadow-indigo-100/50"> <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.5" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> </div> <h3 class="text-xl font-bold text-slate-900 tracking-tight mb-3">Kinetic Mesh Sync</h3> <p class="text-sm text-slate-500 leading-relaxed">Achieve 0ms latency across multi-region clusters with our advanced neural handshake protocol. Perfect for global scale operations.</p> </div> <!-- Feature 2 --> <div class="bg-white p-10 rounded-[2.5rem] border border-slate-100 shadow-xl shadow-slate-200/50 hover:border-indigo-100 transition-colors group"> <div class="h-16 w-16 bg-emerald-50 text-emerald-600 rounded-2xl flex items-center justify-center mb-10 group-hover:bg-emerald-600 group-hover:text-white transition-all shadow-lg shadow-emerald-100/50"> <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.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg> </div> <h3 class="text-xl font-bold text-slate-900 tracking-tight mb-3">Manifest Integrity</h3> <p class="text-sm text-slate-500 leading-relaxed">Protect your data with decentralized manifest verification. All packets are sealed and validated across the entire network mesh.</p> </div> <!-- Feature 3 --> <div class="bg-white p-10 rounded-[2.5rem] border border-slate-100 shadow-xl shadow-slate-200/50 hover:border-indigo-100 transition-colors group"> <div class="h-16 w-16 bg-amber-50 text-amber-600 rounded-2xl flex items-center justify-center mb-10 group-hover:bg-amber-600 group-hover:text-white transition-all shadow-lg shadow-amber-100/50"> <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.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> </div> <h3 class="text-xl font-bold text-slate-900 tracking-tight mb-3">Neural Diagnostics</h3> <p class="text-sm text-slate-500 leading-relaxed">Get deep insights with our integrated neural analysis tools. Real-time logging and audit trails for complete sectoral visibility.</p> </div> </div> </div> </body> </html>
