Farigh UI Logo

Farigh UI

Source Code

glow-pricing-card.tsx
1export function GlowPricingCard() {
2  return (
3    <div className="flex min-h-screen items-center justify-center bg-primary px-6 py-12 text-white">
4      <div className="relative w-full max-w-90 overflow-hidden rounded-4xl bg-zinc-900 p-8 border border-white/10 shadow-xl shadow-black/20">
5        <div className="pointer-events-none absolute -right-12 -top-12 size-65 rounded-full bg-[radial-gradient(circle_at_center,rgba(192,38,211,0.6)_0%,transparent_70%)] blur-3xl" />
6        <div className="pointer-events-none absolute right-0 top-0 h-37.5 w-full">
7          <span
8            className="absolute right-6 top-6 h-0.5 w-0.5 rounded-full bg-white/90"
9          />
10        </div>
11
12        <div className="relative z-10">
13          <h2 className="text-[22px] font-medium">Team</h2>
14
15          <div className="mt-5">
16            <div className="text-[56px] font-semibold font-mono leading-none tracking-tight">$5.99</div>
17            <div className="mt-2 text-[15px] text-white/80">per month / billed annually</div>
18          </div>
19
20          <button className="mt-6 w-full rounded-full bg-white py-3.5 text-[17px] font-medium text-black transition-opacity hover:opacity-90">
21            Upgrade
22          </button>
23
24          <ul className="mt-8 space-y-4 text-[15px] text-zinc-100">
25            {[
26              "Unlimited workflows",
27              "Unlimited messages",
28              "4 workspaces",
29              "User provisioning",
30              "Unlimited app integrations",
31              "Audio and video calls"
32            ].map((feature) => (
33              <li key={feature} className="flex items-center gap-3">
34                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-zinc-800">
35                  <svg
36                    viewBox="0 0 24 24"
37                    className="h-3 w-3"
38                    fill="none"
39                    stroke="currentColor"
40                    strokeWidth="3"
41                    strokeLinecap="round"
42                    strokeLinejoin="round"
43                  >
44                    <polyline points="20 6 9 17 4 12" />
45                  </svg>
46                </span>
47                <span>{feature}</span>
48              </li>
49            ))}
50          </ul>
51        </div>
52      </div>
53    </div>
54  );
55}
56

Related

Flight Card - San Francisco - Free React component preview

Flight Card - San Francisco

Flight Card - New York - Free React component preview

Flight Card - New York

Simplified Pricing - Free React component preview

Simplified Pricing

Mental Pricing - Free React component preview

Mental Pricing