A dark pricing section for a product with one price. A wide card is split in two: the left side lists everything that is included in two columns, and the right side holds the price, a short note, the button and a satisfaction guarantee line with a shield icon. On phones the list comes first and the price panel follows underneath, full width.
const price = { amount: 24, unit: "per workspace, per month", note: "Up to 25 people. Billed monthly, cancel any time.", cta: "Start your free trial" };
const extra = { text: "More than 25 people? Extra seats are $1 each per month.", link: "See how seats work" };
const included = [
"Unlimited pages and folders",
"Up to 25 teammates",
"Version history for 90 days",
"Comments and mentions",
"Guest links with a password",
"Full-text search",
"Import from Word and Markdown",
"Support that replies within a day",
];
export default function SinglePriceCardWithGuarantee() {
return (
<section className="bg-slate-950 px-4 py-16 text-white sm:px-6 sm:py-20">
<div className="mx-auto max-w-5xl">
<p className="text-sm font-semibold text-lime-300">Pricing</p>
<h2 className="mt-2 max-w-lg text-3xl font-semibold tracking-tight sm:text-4xl">One price. The whole product.</h2>
<p className="mt-3 max-w-lg text-slate-300">No tiers to compare and nothing locked behind an upgrade. Your team gets every feature from the first day.</p>
<div className="mt-10 grid rounded-2xl border border-slate-800 bg-slate-900 lg:grid-cols-5">
<div className="flex flex-col p-7 sm:p-10 lg:col-span-3">
<h3 className="text-base font-semibold">Everything is included</h3>
<ul className="mt-6 grid gap-x-8 gap-y-4 text-sm text-slate-200 sm:grid-cols-2">
{included.map((item) => (
<li key={item} className="flex items-start gap-3">
<span className="mt-0.5 flex h-5 w-5 flex-none items-center justify-center rounded-full bg-lime-300 text-slate-950">
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className="h-3.5 w-3.5">
<path d="M5 10.5l3.2 3.2L15 6.5" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
{item}
</li>
))}
</ul>
<p className="mt-8 border-t border-slate-800 pt-6 text-sm text-slate-300 lg:mt-auto">
{extra.text}{" "}
<a href="#" className="font-semibold text-lime-300 underline underline-offset-4 hover:text-lime-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-lime-300">
{extra.link}
</a>
</p>
</div>
<div className="flex flex-col border-t border-slate-800 p-7 sm:p-10 lg:col-span-2 lg:border-l lg:border-t-0">
<p className="flex items-baseline gap-2">
<span className="text-6xl font-semibold tracking-tight">${price.amount}</span>
<span className="text-sm text-slate-300">{price.unit}</span>
</p>
<p className="mt-3 text-sm text-slate-300">{price.note}</p>
<a
href="#"
className="mt-7 inline-flex h-12 items-center justify-center rounded-xl bg-lime-300 px-6 text-sm font-semibold text-slate-950 transition hover:bg-lime-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-lime-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900"
>
{price.cta}
</a>
<p className="mt-6 flex items-start gap-3 border-t border-slate-800 pt-6 text-sm leading-relaxed text-slate-300">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="mt-0.5 h-5 w-5 flex-none text-lime-300">
<path d="M12 3l7 3v5.5c0 4.2-2.8 7.6-7 9.5-4.2-1.9-7-5.3-7-9.5V6l7-3z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
<path d="M9 12l2.2 2.2L15 10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
</svg>
<span>
<span className="font-semibold text-white">Satisfaction guarantee.</span> If it is not right for your team, email us and we refund every cent.
</span>
</p>
</div>
</div>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/single-price-card-with-guarantee.json
When most customers need the same thing. One price removes the work of choosing, makes the page shorter and is easier to explain in an ad or an email. Add plans later if you see clear groups with different needs.
Directly under the button. That is the moment a visitor weighs the risk, so a short, specific promise there answers the question before they leave to look for a refund policy.
Change `unit` in the `price` object to something like "one-time payment" and update `note` to say what the buyer keeps. Nothing else in the layout needs to change.
Yes. Add a second amount, hold the period in `useState` and show the matching number. Place the two toggle buttons above the price inside the right panel.
A dark band between light sections is a common way to make pricing stand out. If you would rather blend in, use the light version described in the customise notes.
Related: Two-Plan Pricing with Comparison Lists, Pricing Table with Monthly and Yearly Toggle, Call-to-Action Banner on a Brand Colour, Button Set: Primary, Secondary, Ghost, Icon and Loading.
More pricing or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.