≈Tailwind
1<div class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-zinc-800 bg-[#101114] p-7 text-white shadow-2xl shadow-black/30">2 3 <div class="absolute -right-16 -top-20 h-48 w-48 rounded-full bg-violet-600/30 blur-3xl"></div>4 5 <div class="relative">6 <span class="inline-flex rounded-lg bg-violet-600 px-2.5 py-1 text-[10px] font-bold tracking-widest text-white">7 PRO8 </span>9 10 <h2 class="mt-5 text-2xl font-bold tracking-tight">11 Build without limits.12 </h2>13 14 <p class="mt-2 text-sm leading-6 text-zinc-400">15 Everything you need to build and scale your next project.16 </p>17 18 <div class="mt-7 flex items-end gap-1">19 <strong class="text-5xl font-bold tracking-[-0.05em]">20 $2921 </strong>22 23 <span class="mb-2 text-sm text-zinc-500">24 /month25 </span>26 </div>27 28 <div class="my-7 h-px bg-zinc-800"></div>29 30 <ul class="space-y-4 text-sm">31 <li class="flex items-center gap-3 text-zinc-300">32 <span class="text-emerald-400">✓</span>33 Unlimited projects34 </li>35 36 <li class="flex items-center gap-3 text-zinc-300">37 <span class="text-emerald-400">✓</span>38 Advanced analytics39 </li>40 41 <li class="flex items-center gap-3 text-zinc-300">42 <span class="text-emerald-400">✓</span>43 Custom components44 </li>45 46 <li class="flex items-center gap-3 text-zinc-300">47 <span class="text-emerald-400">✓</span>48 Priority support49 </li>50 </ul>51 52 <button class="mt-8 flex w-full items-center justify-center gap-2 rounded-xl bg-white px-5 py-3.5 text-sm font-bold text-zinc-950 transition hover:-translate-y-0.5 hover:bg-zinc-100 active:translate-y-0">53 Get started54 <span class="text-base">→</span>55 </button>56 57 <p class="mt-3 text-center text-[11px] text-zinc-600">58 No credit card required59 </p>60 </div>61</div>