Challenge: Build Card Component
Task
Using Tailwind CSS, create a card component with the following requirements:
- The card should have:
- A maximum width of
md; - Rounded corners;
- A background color.
- A maximum width of
- 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.
- Add badges to the card with:
- Rounded corners and small font size.
index.html
- Use
max-w-mdto set the maximum width of the card; - Use
roundedto add rounded corners to the card; - Use
bg-purple-100to set the background color of the card; - Use
w-fullto make the image take up the full width of the card; - Use
font-boldto apply bold styling to the text; - Use
text-xlto set a larger font size for the title; - Use
text-baseto set the base font size for the paragraph text; - Use
italicto apply italic styling to the text; - Use
rounded-fullto add rounded corners to the badges; - Use
text-smto set the small font size for the badges.
index.html
Everything was clear?
Thanks for your feedback!
SectionΒ 3. ChapterΒ 4
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Suggested prompts:
Can you show me an example of the card component using these Tailwind classes?
What should the content (image, title, paragraph, badges) of the card be?
Can you explain how to add multiple badges to the card?
Awesome!
Completion rate improved to 3.57
Challenge: Build Card Component
Swipe to show menu
Task
Using Tailwind CSS, create a card component with the following requirements:
- The card should have:
- A maximum width of
md; - Rounded corners;
- A background color.
- A maximum width of
- 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.
- Add badges to the card with:
- Rounded corners and small font size.
index.html
- Use
max-w-mdto set the maximum width of the card; - Use
roundedto add rounded corners to the card; - Use
bg-purple-100to set the background color of the card; - Use
w-fullto make the image take up the full width of the card; - Use
font-boldto apply bold styling to the text; - Use
text-xlto set a larger font size for the title; - Use
text-baseto set the base font size for the paragraph text; - Use
italicto apply italic styling to the text; - Use
rounded-fullto add rounded corners to the badges; - Use
text-smto set the small font size for the badges.
index.html
Everything was clear?
Thanks for your feedback!
SectionΒ 3. ChapterΒ 4