All Prompts
All Prompts
pricinggridtailwindresponsivesaasctatable
Responsive Tailwind Pricing Plan Cards
Адаптивные карточки тарифов с градиентом, деталями и кнопками CTA. Идеально для SaaS и лендингов. Tailwind CSS.
Prompt
<div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
<!-- Starter -->
<article class="relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-b from-neutral-900/70 to-neutral-950/80 backdrop-blur-xl p-5 sm:p-6">
<div class="flex items-center justify-between text-xs">
<div class="inline-flex items-center gap-2 text-white/60">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-950/80 ring-1 ring-white/10 text-white/80">01</span>
<span class="">Starter</span>
</div>
</div>
<div class="mt-4">
<h3 class="text-2xl font-medium tracking-tight">Starter</h3>
<p class="text-sm text-white/60 mt-1">For individuals and side projects.</p>
<div class="mt-5 flex items-baseline gap-1">
<span class="text-3xl font-medium tracking-tight" data-price="" data-monthly="29" data-yearly="23">$23</span>
<span class="text-sm text-white/50">/mo</span>
</div>
<p class="text-xs text-white/40" data-billed-note="" data-monthly-note="Billed monthly" data-yearly-note="Billed yearly ($276)">Billed yearly ($276)</p>
<button class="mt-5 inline-flex items-center justify-center gap-2 h-11 w-full rounded-full bg-white/90 text-neutral-900 text-sm font-normal hover:bg-white transition">
Get Started
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</button>
</div>
<div class="mt-6">
<p class="text-xs text-white/60">Includes:</p>
<ul class="mt-3 space-y-3">
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">Up to 5 projects</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">10GB storage</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">Community support</span>
</li>
</ul>
</div>
</article>
<!-- Team (Most popular) -->
<article class="relative overflow-hidden rounded-2xl border border-white/20 bg-gradient-to-b from-neutral-900/80 to-neutral-950/90 backdrop-blur-xl p-5 sm:p-6 shadow-[0_2px_10px_rgba(0,0,0,0.25)]">
<div class="absolute right-4 top-4">
<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[10px] border border-indigo-400/30" style="background: rgba(99,102,241,0.12); color: rgb(165,180,252);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-3.5 h-3.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
Most popular
</span>
</div>
<div class="flex items-center justify-between text-xs">
<div class="inline-flex items-center gap-2 text-white/60">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-950/80 ring-1 ring-indigo-500/20 text-white/80">02</span>
<span>Team</span>
</div>
</div>
<div class="mt-4">
<h3 class="text-2xl font-medium tracking-tight">Team</h3>
<p class="text-sm text-white/60 mt-1">For growing teams shipping weekly.</p>
<div class="mt-5 flex items-baseline gap-1">
<span class="text-3xl font-medium tracking-tight" data-price="" data-monthly="79" data-yearly="63">$63</span>
<span class="text-sm text-white/50">/mo</span>
</div>
<p class="text-xs text-white/40" data-billed-note="" data-monthly-note="Billed monthly" data-yearly-note="Billed yearly ($756)">Billed yearly ($756)</p>
<button class="mt-5 inline-flex items-center justify-center gap-2 h-11 w-full rounded-full bg-white/90 text-neutral-900 text-sm font-normal hover:bg-white transition">
Start Team
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-4 h-4"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
</button>
</div>
<div class="mt-6">
<p class="text-xs text-white/60">Everything in Starter, plus:</p>
<ul class="mt-3 space-y-3">
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-indigo-500/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">Unlimited projects & collaborators</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-indigo-500/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">100GB storage on global edge</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-indigo-500/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">Priority email & live chat</span>
</li>
</ul>
</div>
</article>
<!-- Business -->
<article class="relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-b from-neutral-900/70 to-neutral-950/80 backdrop-blur-xl p-5 sm:p-6">
<div class="flex items-center justify-between text-xs">
<div class="inline-flex items-center gap-2 text-white/60">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-950/80 ring-1 ring-white/10 text-white/80">03</span>
<span class="">Business</span>
</div>
</div>
<div class="mt-4">
<h3 class="text-2xl font-medium tracking-tight">Business</h3>
<p class="text-sm text-white/60 mt-1">For fast‑moving orgs with scale.</p>
<div class="mt-5 flex items-baseline gap-1">
<span class="text-3xl font-medium tracking-tight" data-price="" data-monthly="199" data-yearly="159">$159</span>
<span class="text-sm text-white/50">/mo</span>
</div>
<p class="text-xs text-white/40" data-billed-note="" data-monthly-note="Billed monthly" data-yearly-note="Billed yearly ($1,908)">Billed yearly ($1,908)</p>
<button class="mt-5 inline-flex items-center justify-center gap-2 h-11 w-full rounded-full bg-white/90 text-neutral-900 text-sm font-normal hover:bg-white transition">
Start Business
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket w-4 h-4"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" class=""></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" class=""></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path></svg>
</button>
</div>
<div class="mt-6">
<p class="text-xs text-white/60">Everything in Team, plus:</p>
<ul class="mt-3 space-y-3">
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">Advanced access controls & roles</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">Custom environments & approvals</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">Analytics & audit exports</span>
</li>
</ul>
</div>
</article>
<!-- Enterprise -->
<article class="relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-b from-neutral-900/70 to-neutral-950/80 backdrop-blur-xl p-5 sm:p-6">
<div class="flex items-center justify-between text-xs">
<div class="inline-flex items-center gap-2 text-white/60">
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-950/80 ring-1 ring-white/10 text-white/80">04</span>
<span class="">Enterprise</span>
</div>
</div>
<div class="mt-4">
<h3 class="text-2xl font-medium tracking-tight">Enterprise</h3>
<p class="text-sm text-white/60 mt-1">Security, scale, and support.</p>
<div class="mt-5 flex items-baseline gap-1">
<span class="text-3xl font-medium tracking-tight">Custom</span>
</div>
<p class="text-xs text-white/40">Let’s design a plan for your needs</p>
<button class="mt-5 inline-flex items-center justify-center gap-2 h-11 w-full rounded-full bg-white/20 text-white text-sm font-normal hover:bg-white/30 transition border border-white/20">
Contact Sales
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="messages-square" class="lucide lucide-messages-square w-4 h-4"><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" class=""></path><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1" class=""></path></svg>
</button>
</div>
<div class="mt-6">
<p class="text-xs text-white/60">Everything in Business, plus:</p>
<ul class="mt-3 space-y-3">
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">SSO/SAML, SCIM & audit trails</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">Dedicated infrastructure & 99.9% SLA</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 h-5 w-5 rounded-full bg-neutral-900/70 border border-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3.5 h-3.5 text-emerald-400"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
<span class="text-sm text-white/80">24/7 phone support & CSM</span>
</li>
</ul>
</div>
</article>
</div>