Challenge: Cards

Task

Using Tailwind CSS, create a card component with the following requirements:

1. The card should have:
   • A maximum width of md;
   • Rounded corners;
   • A background color.
2. The card should contain:
   • An image that takes up the full width of the card;
   • A title with bold text and large font size;
   • A paragraph with base font size and italic style.
3. Add badges to the card with:
   • Rounded corners and small font size.

• Use max-w-md to set the maximum width of the card;
• Use rounded to add rounded corners to the card;
• Use bg-purple-100 to set the background color of the card;
• Use w-full to make the image take up the full width of the card;
• Use font-bold to apply bold styling to the text;
• Use text-xl to set a larger font size for the title;
• Use text-base to set the base font size for the paragraph text;
• Use italic to apply italic styling to the text;
• Use rounded-full to add rounded corners to the badges;
• Use text-sm to set the small font size for the badges.