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

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Cards - Task</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="max-w-_____ _____ overflow-hidden shadow-lg _____-purple-100">
<img
class="_____-_____"
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/615567da-b053-4674-b89c-053057d2bca7/section-3/fan.png"
alt="Sample Image"
/>
<div class="px-6 py-4">
<h2 class="font-_____ text-_____ text-purple-900 mb-2">Card Title</h2>
<p class="text-purple-700 text-_____ _____">
This is a simple card component created using Tailwind CSS. It
includes an image, a title, some text, and actions.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span
class="inline-block bg-yellow-200 _____-full px-3 py-1 text-_____ font-semibold text-yellow-700 mr-2 mb-2"
>#tag1</span
>
<span
class="inline-block bg-pink-200 _____-full px-3 py-1 text-_____ font-semibold text-pink-700 mr-2 mb-2"
>#tag2</span
>
<span
class="inline-block bg-green-200 _____-full px-3 py-1 text-_____ font-semibold text-green-700 mr-2 mb-2"
>#tag3</span
>
</div>
<div class="px-6 pt-4 pb-2">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Action 1
</button>
<button
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded ml-2"
>
Action 2
</button>
</div>
</div>
</body>
</html>

  • 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Cards - Solution</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="max-w-md rounded overflow-hidden shadow-lg bg-purple-100">
<img
class="w-full"
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/615567da-b053-4674-b89c-053057d2bca7/section-3/fan.png"
alt="Sample Image"
/>
<div class="px-6 py-4">
<h2 class="font-bold text-xl text-purple-900 mb-2">Card Title</h2>
<p class="text-purple-700 text-base italic">
This is a simple card component created using Tailwind CSS. It
includes an image, a title, some text, and actions.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span
class="inline-block bg-yellow-200 rounded-full px-3 py-1 text-sm font-semibold text-yellow-700 mr-2 mb-2"
>#tag1</span
>
<span
class="inline-block bg-pink-200 rounded-full px-3 py-1 text-sm font-semibold text-pink-700 mr-2 mb-2"
>#tag2</span
>
<span
class="inline-block bg-green-200 rounded-full px-3 py-1 text-sm font-semibold text-green-700 mr-2 mb-2"
>#tag3</span
>
</div>
Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 4

Fråga AI

expand
ChatGPT

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

some-alt