How To Create A Pricing Table in Tailwind CSS and Next.js?

/* globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --background: #ffffff;
    --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
    }
}

body {
    color: var(--foreground);
    background: var(--background);
    font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

// page.js

import PricingTable from './components/PricingTable';

export default function Home() {
    const pricingPlans = [
        {
            name: 'Basic DSA',
            price: 500,
            features: [
                'Introduction to Data Structures',
                'Basic Algorithms (Sorting, Searching)',
                'Weekly Assignments',
                'Certificate on Completion',
            ],
            colorClass: 'text-blue-600',
            buttonClass: 'bg-blue-600',
            hoverClass: 'bg-blue-700',
            isHighlighted: false,
        },
        {
            name: 'Advanced DSA',
            price: 1000,
            features: [
                'All Basic DSA Features',
                'Advanced Algorithms (Graphs, DP)',
                'Data Structures (Trees, Heaps)',
                '2 Personal Doubt Sessions',
                'Limit up to 2 users',
            ],
            colorClass: 'text-yellow-500',
            buttonClass: 'bg-yellow-500',
            hoverClass: 'bg-yellow-600',
            isHighlighted: true,
        },
        {
            name: 'Premium DSA',
            price: 1600,
            features: [
                'All Advanced DSA Features',
                'Mock Coding Interviews',
                'Placement Assistance',
                '4 Personal Doubt Sessions',
                'Limit up to 4 users',
            ],
            colorClass: 'text-green-600',
            buttonClass: 'bg-green-600',
            hoverClass: 'bg-green-700',
            isHighlighted: false,
        },
    ];

    return (
        <div>
            <PricingTable plans={pricingPlans} />
        </div>
    );
}

// PricingTable.js

const PricingTable = ({ plans }) => {
    return (
        <div className="min-h-screen flex justify-center items-center bg-gray-100">
            <div className="w-full max-w-6xl mx-auto py-12 px-6">
                <h2 className="text-3xl font-bold text-center text-green-600
                mb-10">Welcome to GeeksForGeeks</h2>
                <h2 className="text-3xl font-bold text-center mb-10">
                Select Your Plan</h2>
                <p className="text-center text-gray-600 mb-8">
                DSA Self Placed Course: Beginner to Advance</p>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {plans.map((plan, index) => (
                        <div key={index} className={`bg-white rounded-lg 
                        shadow-lg p-6 text-center ${plan.isHighlighted ? 'border-2
                        border-yellow-500' : ''}`}>
                            <h3 className="text-2xl font-bold mb-4">{plan.name}
                            </h3>
                            <p className={`text-4xl font-bold mb-6 
                            ${plan.colorClass}`}>
                            ₹ {plan.price}/month</p>
                            <ul className="text-gray-700 space-y-4 mb-6">
                                {plan.features.map((feature, idx) => (
                                    <li key={idx}>{feature}</li>
                                ))}
                            </ul>
                            <button className={`${plan.buttonClass} 
                            text-white py-2 px-4 rounded-full hover:${plan.hoverClass}`}
                            > Buy Now
                            </button>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default PricingTable;