| import Button from '../components/Button'; // Predefined Tailwind-styled button | |
| export function Card() { | |
| return ( | |
| <div className="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden"> | |
| <img | |
| className="w-full h-48 object-cover" | |
| src="/image.jpg" | |
| alt="Card image" | |
| /> | |
| <div className="p-4"> | |
| <h2 className="text-xl font-semibold text-gray-800">Card Title</h2> | |
| <p className="mt-2 text-gray-600"> | |
| A short description goes here. Tailwind makes it easy to build responsive, polished components quickly. | |
| </p> | |
| <Button variant="primary" className="mt-4"> | |
| Learn More | |
| </Button> | |
| </div> | |
| </div> | |
| ); | |
| } |