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 Pricing Page Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex flex-col min-h-screen antialiased text-slate-500 font-medium"> <header class="h-20 flex items-center justify-between px-8 md:px-16 absolute top-0 w-full z-50"> <div class="text-xl font-black text-slate-900 tracking-tighter uppercase">Vanguard</div> <div class="flex items-center gap-6"> <button class="px-6 py-2 bg-slate-100 text-slate-900 rounded-lg text-[10px] font-black uppercase tracking-widest hover:bg-slate-200 transition-colors">Client Log In</button> </div> </header> <!-- Hero & Pricing Section --> <section class="pt-40 pb-32 px-6"> <div class="max-w-7xl mx-auto space-y-24"> <!-- Title --> <div class="text-center space-y-6 max-w-2xl mx-auto"> <h1 class="text-5xl md:text-7xl font-black text-slate-900 tracking-tighter leading-none">Scale the Void</h1> <p class="text-xl leading-relaxed font-normal">Pricing based purely on aggregate node throughput. No artificial limitations on concurrent connections.</p> <!-- Toggle --> <div class="flex items-center justify-center gap-4 pt-8"> <span class="text-[10px] font-black uppercase tracking-widest text-slate-900">Monthly Sync</span> <button class="w-14 h-8 bg-indigo-600 rounded-full p-1 transition-colors cursor-pointer relative shadow-inner"> <div class="h-6 w-6 bg-white rounded-full translate-x-6 transition-transform shadow-md"></div> </button> <span class="text-[10px] font-black uppercase tracking-widest text-slate-400">Annual <span class="text-emerald-500 ml-1">-15%</span></span> </div> </div> <!-- Pricing Plans --> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-start"> <!-- Bronze / Seed Tier --> <div class="bg-white rounded-[3rem] p-12 border border-slate-100 shadow-sm space-y-10 group hover:-translate-y-2 transition-transform duration-500"> <div class="space-y-4"> <span class="text-[9px] text-slate-400 font-black uppercase tracking-[0.4em]">Node Protocol</span> <h2 class="text-3xl font-black text-slate-900 tracking-tight leading-none group-hover:text-indigo-600 transition-colors">Seed Layer</h2> <div class="flex items-baseline gap-2 pt-2"> <span class="text-sm font-black text-slate-400">$</span> <span class="text-6xl font-black text-slate-900 tracking-tighter">0</span> </div> </div> <p class="text-sm leading-relaxed border-b border-slate-100 pb-8">Perfect for isolated experiments and small-scale mesh setups.</p> <ul class="space-y-4 text-sm font-bold text-slate-700"> <li class="flex items-center gap-3"><svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> 1 Regional Cluster</li> <li class="flex items-center gap-3"><svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> Basic Analytics Logging</li> <li class="flex items-center gap-3"><svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> 100GB Throughput</li> </ul> <div class="pt-6 border-t border-slate-100"> <button class="w-full py-4 border-2 border-slate-200 text-slate-900 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:border-slate-300 transition-colors">Start Building</button> </div> </div> <!-- Alpha Tier (Featured) --> <div class="bg-slate-900 text-white rounded-[3rem] p-12 shadow-2xl shadow-slate-900/40 relative overflow-hidden group hover:-translate-y-2 transition-transform duration-500 z-10"> <div class="absolute inset-0 bg-indigo-600/10 pointer-events-none group-hover:scale-110 transition-transform duration-[2s]"></div> <div class="absolute top-0 right-0 p-8"> <div class="h-4 w-4 bg-indigo-500 rounded-full animate-pulse shadow-[0_0_15px_rgba(99,102,241,0.5)]"></div> </div> <div class="relative z-10 space-y-10"> <div class="space-y-4"> <span class="text-[9px] text-indigo-400 font-black uppercase tracking-[0.4em]">Production Mode</span> <h2 class="text-3xl font-black tracking-tight leading-none text-white">Alpha Core</h2> <div class="flex items-baseline gap-2 pt-2"> <span class="text-sm font-black text-slate-400">$</span> <span class="text-6xl font-black tracking-tighter text-white">49</span> <span class="text-sm font-black text-slate-500">/mo</span> </div> </div> <p class="text-sm leading-relaxed text-slate-400 border-b border-slate-800 pb-8">Dedicated performance for mission-critical deployments.</p> <ul class="space-y-4 text-sm font-bold text-slate-200"> <li class="flex items-center gap-3"><svg class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> Global Edge Network</li> <li class="flex items-center gap-3"><svg class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> Kinetic Auto-Routing</li> <li class="flex items-center gap-3"><svg class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> Deep Packet Inspection</li> <li class="flex items-center gap-3"><svg class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> Unlimited Validations</li> </ul> <div class="pt-6 border-t border-slate-800"> <button class="w-full py-4 bg-indigo-600 rounded-2xl text-[10px] font-black uppercase tracking-widest text-white shadow-xl hover:bg-indigo-500 transition-colors">Initialize Alpha</button> </div> </div> </div> <!-- Apex Custom Tier --> <div class="bg-white rounded-[3rem] p-12 border border-slate-100 shadow-sm space-y-10 group hover:-translate-y-2 transition-transform duration-500"> <div class="space-y-4"> <span class="text-[9px] text-slate-400 font-black uppercase tracking-[0.4em]">Enterprise Scale</span> <h2 class="text-3xl font-black text-slate-900 tracking-tight leading-none group-hover:text-indigo-600 transition-colors">Vanguard Custom</h2> <div class="flex items-baseline gap-2 pt-2"> <span class="text-6xl font-black text-slate-900 tracking-tighter">Apex</span> </div> </div> <p class="text-sm leading-relaxed border-b border-slate-100 pb-8">Tailored network configuration for multi-national conglomerates.</p> <ul class="space-y-4 text-sm font-bold text-slate-700"> <li class="flex items-center gap-3"><svg class="h-5 w-5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> Dedicated Infrastructure</li> <li class="flex items-center gap-3"><svg class="h-5 w-5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> 24/7 Spectral Engineers</li> <li class="flex items-center gap-3"><svg class="h-5 w-5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg> Custom SLA Contracts</li> </ul> <div class="pt-6 border-t border-slate-100"> <button class="w-full py-4 bg-slate-100 text-slate-900 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-200 transition-colors">Contact Council</button> </div> </div> </div> </div> </section> <!-- FAQ Section --> <section class="py-24 bg-white border-y border-slate-100 px-6"> <div class="max-w-4xl mx-auto space-y-16"> <div class="text-center space-y-4"> <span class="text-[9px] font-black uppercase tracking-[0.4em] text-indigo-600">Protocol Clarifications</span> <h2 class="text-4xl font-black text-slate-900 tracking-tighter">Knowledge Base</h2> </div> <div class="space-y-6 max-w-2xl mx-auto"> <div class="p-8 border border-slate-100 rounded-3xl bg-gray-50/50 hover:bg-slate-50 transition-colors"> <h3 class="text-lg font-black text-slate-900 mb-3 leading-tight tracking-tight">How does Vanguard handle node saturation?</h3> <p class="text-sm leading-relaxed font-normal text-slate-500">The kinetic mesh automatically routes incoming traffic to the nearest dormant cluster within 5ms of detecting structural stress on the primary node.</p> </div> <div class="p-8 border border-slate-100 rounded-3xl bg-gray-50/50 hover:bg-slate-50 transition-colors"> <h3 class="text-lg font-black text-slate-900 mb-3 leading-tight tracking-tight">Can I downgrade my protocol layer later?</h3> <p class="text-sm leading-relaxed font-normal text-slate-500">Yes, manual layer adjustments can be enacted directly inside the terminal. Billing modifications are instant and prorated dynamically.</p> </div> </div> </div> </section> <footer class="py-12 text-center text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 bg-gray-50"> © 2026 Vanguard Mesh Systems </footer> </body> </html>
