ZekaAi - Premium AI Chatbot SaaS

Can you help me design a React component for a pricing table using the new CSS framework?

Absolutely! Here is a clean and responsive pricing table component using your framework's utility classes and components.

PricingTable.tsx

export default function Pricing() {
  return (
    <div className="is-grid grid-cols-1 md:grid-cols-3 gap-6">
      <div className="p-6 border rounded-3 bg-surface shadow-tiny text-center">
        <h3 className="font-bold text-large">Basic</h3>
        <div className="text-3xlarge font-black my-4">$9<span className="text-base font-normal text-muted">/mo</span></div>
        <button className="button is-primary-outline w-full mb-6">Get Started</button>
        <ul className="list is-unstyled text-start">
          <li className="mb-2">✓ 10 Projects</li>
          <li className="mb-2">✓ Basic Support</li>
        </ul>
      </div>
    </div>
  );
}

This layout uses the `is-grid` system for responsiveness and basic card-like styling with shadows and borders.

Zeka AI can make mistakes. Consider verifying important information.