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 Card</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-indigo-50 flex items-center justify-center min-h-screen p-6 antialiased"> <div class="w-full max-w-sm bg-white rounded-[3rem] shadow-3xl p-12 border border-white relative overflow-hidden"> <div class="absolute top-0 right-0 p-8"> <span class="px-5 py-2 bg-indigo-600 text-white text-[10px] font-black uppercase tracking-[0.2em] rounded-full shadow-2xl">Most Popular</span> </div> <div class="mb-10"> <h3 class="text-xl font-black text-slate-900 tracking-tighter italic uppercase mb-2">Alpha Stream.</h3> <p class="text-slate-400 font-bold text-xs">For high-intensity scaling</p> </div> <div class="flex items-baseline gap-2 mb-10"> <span class="text-6xl font-black text-slate-900 tracking-tighter">$99</span> <span class="text-slate-400 font-black text-xs uppercase tracking-widest">/ Node</span> </div> <ul class="space-y-4 mb-12"> <li class="flex items-center gap-4 text-sm font-bold text-slate-600 italic"> <svg class="h-5 w-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg> Unlimited Protocols </li> <li class="flex items-center gap-4 text-sm font-bold text-slate-600 italic"> <svg class="h-5 w-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg> 24/7 Core Access </li> <li class="flex items-center gap-4 text-sm font-bold text-slate-600 italic"> <svg class="h-5 w-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg> Global Edge Network </li> </ul> <button class="w-full h-18 bg-indigo-600 text-white rounded-3xl font-black text-xs uppercase tracking-[0.2em] shadow-2xl hover:bg-slate-900 transition-all active:scale-95 cursor-pointer">Start Deployment</button> </div> </body> </html>
