Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära 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
Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 4

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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
Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 4
some-alt