Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda 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
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 4

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

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
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 4
some-alt