Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Challenge: Building Card Component | Building Basic Components
Tailwind CSS for Web Development

book
Challenge: Building Card Component

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.
html

index.html

copy
  • 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.
html

index.html

copy
Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 4
some-alt