Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Challenge: Building Card Component | Building Basic Components
Tailwind CSS for Web Development

bookChallenge: 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.
index.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.
index.html

index.html

copy
Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 4

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 3.57

bookChallenge: Building Card Component

Veeg om het menu te tonen

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

index.html

copy
Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 4
some-alt