Card

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6"><h3 className="font-semibold text-lg">Simple Card</h3><p className="text-sm text-muted-foreground mt-2">Just a basic card with some text.</p></div>

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px]"><div className="p-6 pb-2"><h3 className="font-semibold text-lg">Header</h3></div><div className="p-6 pt-0"><p className="text-sm text-muted-foreground">Content area.</p></div></div>

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px]"><div className="p-6"><h3 className="font-semibold text-lg">Main Content</h3></div><div className="p-6 pt-0 flex justify-end"><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Action</button></div></div>

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] overflow-hidden"><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80" className="w-full h-40 object-cover" /><div className="p-6"><h3 className="font-semibold">Image Card</h3></div></div>

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 cursor-pointer transition-colors hover:bg-muted/50"><h3 className="font-semibold">Hover me</h3></div>

<div className="rounded-xl border border-transparent bg-primary text-primary-foreground shadow w-[350px] p-6"><h3 className="font-semibold">Colored Card</h3><p className="text-sm opacity-90 mt-2">Primary background color.</p></div>

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 text-center"><h3 className="font-semibold text-lg">Pro Plan</h3><div className="mt-4 text-4xl font-bold">$29<span className="text-lg text-muted-foreground">/mo</span></div><button className="mt-6 w-full bg-primary text-primary-foreground px-4 py-2 rounded-md">Subscribe</button></div>

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 text-center"><img src="https://i.pravatar.cc/150?u=a" className="w-20 h-20 rounded-full mx-auto mb-4" /><h3 className="font-semibold text-lg">John Doe</h3><p className="text-sm text-muted-foreground">Software Engineer</p></div>

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6 flex justify-between items-center"><div><p className="text-sm text-muted-foreground">Total Revenue</p><h3 className="text-2xl font-bold mt-1">$45,231.89</h3></div><div className="h-10 w-10 bg-primary/10 rounded-full flex items-center justify-center text-primary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div></div>

<div className="rounded-xl border border-border bg-card text-card-foreground shadow w-[350px] p-6"><h3 className="font-semibold text-lg mb-4">Login</h3><div className="space-y-4"><input className="w-full h-10 px-3 border rounded-md" placeholder="Email" /><input type="password" className="w-full h-10 px-3 border rounded-md" placeholder="Password" /><button className="w-full h-10 bg-primary text-primary-foreground rounded-md">Sign In</button></div></div>