Modern pricing table with monthly/yearly toggle, popular plan highlighting, and FAQ section.
reacttailwindcssNeed complete templates?
View Premium Templates"use client";
import { useState } from "react";
interface PricingPlan {
name: string;
price: number;
yearlyPrice: number;
description: string;
features: string[];
popular?: boolean;
buttonText: string;
buttonVariant: "primary" | "secondary";
}
export default function PricingSection() {
const [isYearly, setIsYearly] = useState(false);
const plans: PricingPlan[] = [
{
name: "Basic",
price: 9,
yearlyPrice: 90,
description: "Perfect for individuals getting started",
features: [
"Up to 3 projects",
"5GB storage",
"Email support",
"Basic analytics",
"Mobile app access",
],
buttonText: "Get Started",
buttonVariant: "secondary",
},
{
name: "Pro",
price: 29,
yearlyPrice: 290,
description: "Best for growing teams and businesses",
features: [
"Unlimited projects",
"100GB storage",
"Priority support",
"Advanced analytics",
"Team collaboration",
"API access",
"Custom integrations",
],
popular: true,
buttonText: "Start Free Trial",
buttonVariant: "primary",
},
{
name: "Enterprise",
price: 99,
yearlyPrice: 990,
description: "For large organizations with advanced needs",
features: [
"Everything in Pro",
"Unlimited storage",
"24\/7 phone support",
"Custom analytics",
"Advanced security",
"Dedicated manager",
"Custom contracts",
"SLA guarantee",
],
buttonText: "Contact Sales",
buttonVariant: "secondary",
},
];
return (
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
{\/* Header *\/}
<div className="text-center mb-12">
<h1 className="text-4xl font-bold text-gray-900 mb-4">
Simple Pricing
<\/h1>
<p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
Choose the perfect plan for your needs. Upgrade or downgrade at any
time.
<\/p>
{\/* Billing Toggle *\/}
<div className="flex items-center justify-center gap-4">
<span
className={`text-sm font-medium ${
!isYearly ? "text-gray-900" : "text-gray-500"
}`}
>
Monthly
<\/span>
<button
onClick={() => setIsYearly(!isYearly)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
isYearly ? "bg-blue-600" : "bg-gray-200"
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
isYearly ? "translate-x-6" : "translate-x-1"
}`}
\/>
<\/button>
<span
className={`text-sm font-medium ${
isYearly ? "text-gray-900" : "text-gray-500"
}`}
>
Yearly
<\/span>
<span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
Save 17%
<\/span>
<\/div>
<\/div>
{\/* Pricing Cards *\/}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{plans.map((plan) => (
<div
key={plan.name}
className={`relative bg-white rounded-2xl shadow-sm border-2 transition-all duration-300 hover:shadow-lg ${
plan.popular
? "border-blue-500 scale-105"
: "border-gray-200 hover:border-gray-300"
}`}
>
{\/* Popular Badge *\/}
{plan.popular && (
<div className="absolute -top-4 left-1\/2 transform -translate-x-1\/2">
<span className="inline-flex items-center rounded-full bg-blue-600 px-4 py-1 text-sm font-medium text-white">
Most Popular
<\/span>
<\/div>
)}
<div className="p-8">
{\/* Plan Name *\/}
<h3 className="text-2xl font-bold text-gray-900 mb-2">
{plan.name}
<\/h3>
{\/* Description *\/}
<p className="text-gray-600 mb-6">{plan.description}<\/p>
{\/* Price *\/}
<div className="mb-6">
<div className="flex items-baseline">
<span className="text-4xl font-bold text-gray-900">
${isYearly ? plan.yearlyPrice : plan.price}
<\/span>
<span className="text-gray-600 ml-2">
\/{isYearly ? "year" : "month"}
<\/span>
<\/div>
{isYearly && (
<p className="text-sm text-gray-500 mt-1">
${plan.price}\/month billed annually
<\/p>
)}
<\/div>
{\/* Features *\/}
<ul className="space-y-3 mb-8">
{plan.features.map((feature, index) => (
<li key={index} className="flex items-start gap-3">
<svg
className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
\/>
<\/svg>
<span className="text-gray-700">{feature}<\/span>
<\/li>
))}
<\/ul>
{\/* CTA Button *\/}
<button
className={`w-full py-3 px-4 rounded-lg font-medium transition-colors ${
plan.buttonVariant === "primary"
? "bg-blue-600 hover:bg-blue-700 text-white"
: "bg-gray-100 hover:bg-gray-200 text-gray-900"
}`}
>
{plan.buttonText}
<\/button>
<\/div>
<\/div>
))}
<\/div>
{\/* FAQ Section *\/}
<div className="mt-16 text-center">
<h2 className="text-2xl font-bold text-gray-900 mb-8">
Frequently Asked Questions
<\/h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<div className="text-left">
<h3 className="font-semibold text-gray-900 mb-2">
Can I change my plan later?
<\/h3>
<p className="text-gray-600 text-sm">
Yes, you can upgrade or downgrade your plan at any time. Changes
will be reflected in your next billing cycle.
<\/p>
<\/div>
<div className="text-left">
<h3 className="font-semibold text-gray-900 mb-2">
Is there a free trial?
<\/h3>
<p className="text-gray-600 text-sm">
Yes, we offer a 14-day free trial for all plans. No credit card
required to start.
<\/p>
<\/div>
<div className="text-left">
<h3 className="font-semibold text-gray-900 mb-2">
What payment methods do you accept?
<\/h3>
<p className="text-gray-600 text-sm">
We accept all major credit cards, PayPal, and bank transfers for
enterprise customers.
<\/p>
<\/div>
<div className="text-left">
<h3 className="font-semibold text-gray-900 mb-2">
Can I cancel anytime?
<\/h3>
<p className="text-gray-600 text-sm">
Absolutely! You can cancel your subscription at any time with no
cancellation fees.
<\/p>
<\/div>
<\/div>
<\/div>
{\/* Trust Indicators *\/}
<div className="mt-16 text-center">
<div className="inline-flex items-center gap-8 text-sm text-gray-600">
<span className="flex items-center gap-2">
<div className="w-2 h-2 bg-green-500 rounded-full"><\/div>
14-day free trial
<\/span>
<span className="flex items-center gap-2">
<div className="w-2 h-2 bg-blue-500 rounded-full"><\/div>
No setup fees
<\/span>
<span className="flex items-center gap-2">
<div className="w-2 h-2 bg-purple-500 rounded-full"><\/div>
Cancel anytime
<\/span>
<\/div>
<\/div>
<\/div>
<\/div>
);
}