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 Three Tier Pricing Section</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 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-[11px] font-black text-indigo-600 uppercase tracking-[0.3em] italic">Mesh Tiers</span> <h2 class="text-5xl font-black text-slate-900 tracking-tighter">Scalable Synchronicity.</h2> <p class="max-w-lg mx-auto text-sm text-slate-500 font-medium leading-relaxed italic">Choose the optimal neural throughput for your regional cluster requirements. All plans include decentralized manifest verification.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-end"> <!-- Starter --> <div class="bg-white p-10 rounded-[3rem] border border-slate-100 shadow-xl shadow-slate-200 flex flex-col h-full"> <div class="mb-10"> <h4 class="text-xs font-black text-slate-400 uppercase tracking-widest italic mb-2">Tier 01</h4> <h3 class="text-2xl font-black text-slate-900 tracking-tight">Observer Core</h3> </div> <div class="mb-10 flex items-baseline gap-1"> <span class="text-4xl font-black text-indigo-600 tracking-tighter">$19</span> <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest italic">/ Cycle</span> </div> <ul class="space-y-4 mb-12 flex-1"> <li class="flex items-center gap-3 text-xs font-bold text-slate-600"> <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg> 12 Active Mesh Nodes </li> <li class="flex items-center gap-3 text-xs font-bold text-slate-600"> <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg> Diagnostic Manifests </li> <li class="flex items-center gap-3 text-xs font-bold text-slate-400 opacity-50 line-through decoration-indigo-500/30"> Neural Handshaking </li> </ul> <button class="w-full py-4 bg-slate-100 text-slate-900 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 hover:text-white transition-all cursor-pointer italic">Start Observation</button> </div> <!-- Pro (Featured) --> <div class="bg-slate-900 p-12 rounded-[3.5rem] shadow-4xl relative overflow-hidden flex flex-col h-full transform scale-105 z-10 border border-white/5"> <div class="absolute top-0 right-0 px-6 py-2 bg-indigo-600 text-white text-[9px] font-black uppercase tracking-widest rounded-bl-3xl italic">Sync Priority</div> <div class="mb-10"> <h4 class="text-xs font-black text-indigo-400 uppercase tracking-widest italic mb-2">Tier 02</h4> <h3 class="text-3xl font-black text-white tracking-tight">Neural Architect</h3> </div> <div class="mb-10 flex items-baseline gap-1"> <span class="text-5xl font-black text-indigo-500 tracking-tighter">$49</span> <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest italic">/ Cycle</span> </div> <ul class="space-y-5 mb-14 flex-1"> <li class="flex items-center gap-4 text-sm font-bold text-slate-300"> <div class="h-2 w-2 bg-indigo-500 rounded-full animate-pulse"></div> Unlimited Mesh Integration </li> <li class="flex items-center gap-4 text-sm font-bold text-slate-300"> <div class="h-2 w-2 bg-indigo-500 rounded-full animate-pulse"></div> Global Node Distribution </li> <li class="flex items-center gap-4 text-sm font-bold text-slate-300"> <div class="h-2 w-2 bg-indigo-500 rounded-full animate-pulse"></div> Premium Manifest Sealing </li> <li class="flex items-center gap-4 text-sm font-bold text-slate-300"> <div class="h-2 w-2 bg-indigo-500 rounded-full animate-pulse"></div> 24/7 Handshake Support </li> </ul> <button class="w-full py-5 bg-indigo-600 text-white rounded-[2rem] text-xs font-black uppercase tracking-widest hover:bg-white hover:text-slate-900 transition-all shadow-xl shadow-indigo-900/50 cursor-pointer italic">Initialize Architecture</button> </div> <!-- Enterprise --> <div class="bg-white p-10 rounded-[3rem] border border-slate-100 shadow-xl shadow-slate-200 flex flex-col h-full"> <div class="mb-10"> <h4 class="text-xs font-black text-slate-400 uppercase tracking-widest italic mb-2">Tier 03</h4> <h3 class="text-2xl font-black text-slate-900 tracking-tight">Sector Overlord</h3> </div> <div class="mb-10 flex items-baseline gap-1"> <span class="text-4xl font-black text-slate-900 tracking-tighter">Custom</span> <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest italic">/ Enterprise</span> </div> <ul class="space-y-4 mb-12 flex-1"> <li class="flex items-center gap-3 text-xs font-bold text-slate-600"> <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg> Private Neural Backbone </li> <li class="flex items-center gap-3 text-xs font-bold text-slate-600"> <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg> Advanced Threat Mitigation </li> <li class="flex items-center gap-3 text-xs font-bold text-slate-600"> <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg> On-Site Protocol Nodes </li> </ul> <button class="w-full py-4 bg-slate-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 transition-all cursor-pointer italic shadow-lg shadow-slate-100">Contact Command</button> </div> </div> </div> </body> </html>
