Muster für Kartenkomponenten
Erstellen Sie Karten mit Bildkopf, Inhaltsbereich und Aktionsfußzeile mithilfe von Flex- und Grid-Layouts in einem abgerundeten Container mit Schatten.
Muster für Kartenkomponenten ist eine kostenlose Tailwind CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Tailwind CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
What Makes a Card Component
A card is a self-contained rectangular surface that groups related content. Cards typically include three zones: a header (often an image or colored strip), a body (title, description, metadata), and an optional footer (action buttons).
In Tailwind, the base card shell uses bg-white rounded-xl shadow-md overflow-hidden to create a white surface with rounded corners, a drop shadow for depth, and clipped corners for any inner images.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<!-- Card content goes here -->
</div>Card With Image Header
The most common card pattern features an image header that spans the full width above the content. Use w-full h-48 object-cover on the <img> tag to fill the width and crop the height consistently regardless of the original image dimensions.
This approach ensures all cards in a grid look uniform even when source images have varying aspect ratios.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<img
src="photo.jpg"
alt="Mountain landscape"
class="w-full h-48 object-cover"
/>
<div class="p-5">
<h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
<p class="mt-1 text-sm text-gray-500">Short description of the card content.</p>
</div>
</div>Card Body Typography Hierarchy
Inside the card body, establish a clear typographic hierarchy to guide the reader's eye. A bold title with text-lg font-bold text-gray-900 commands attention, while a subtitle uses text-sm text-gray-500 for secondary information.
Use mt-2 between elements for consistent vertical rhythm, and line-clamp-2 (from the typography plugin) to truncate long descriptions to exactly two lines, keeping card heights uniform in a grid.
<div class="p-5">
<span class="text-xs font-semibold uppercase tracking-wide text-blue-600">Tutorial</span>
<h3 class="mt-1 text-xl font-bold text-gray-900">Getting Started with Tailwind</h3>
<p class="mt-2 text-sm text-gray-600 line-clamp-2">
Learn how to set up Tailwind CSS and build your first responsive layout using utility classes.
</p>
</div>Card Footer With Actions
The card footer contains action buttons or metadata like author and date. Use a border-t border-gray-100 to visually separate the footer from the body, and flex items-center justify-between px-5 py-3 to space the content horizontally.
This three-zone structure (image, body, footer) is the backbone of product cards, blog post cards, and dashboard widgets.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Card Title</h3>
<p class="mt-2 text-sm text-gray-600">A brief description of this card's content.</p>
</div>
<div class="border-t border-gray-100 flex items-center justify-between px-5 py-3">
<span class="text-xs text-gray-400">June 2026</span>
<button class="text-sm font-semibold text-blue-600 hover:text-blue-700">Read More</button>
</div>
</div>Horizontal Card Layout
For wider content areas, a horizontal card places the image on the left and the content on the right. Use flex on the card container and w-40 flex-shrink-0 on the image wrapper to keep the image a fixed width while the content expands.
This pattern is excellent for blog post lists, search result items, and notification feeds.
<div class="flex bg-white rounded-xl shadow-md overflow-hidden">
<div class="flex-shrink-0">
<img src="photo.jpg" alt="" class="w-40 h-full object-cover" />
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Horizontal Card</h3>
<p class="mt-2 text-sm text-gray-600">Image on the left, content expanding on the right.</p>
<button class="mt-3 text-sm font-semibold text-blue-600 hover:underline">View Article</button>
</div>
</div>Card Hover Effects
Adding a hover effect to a card signals interactivity and improves user experience. A common pattern is to lift the card with a larger shadow on hover using hover:shadow-xl, combined with a smooth upward translate using hover:-translate-y-1.
The transition-all duration-200 class ensures both the shadow and transform animate smoothly. Add cursor-pointer to reinforce that the card is clickable.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm
cursor-pointer transition-all duration-200
hover:shadow-xl hover:-translate-y-1">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Hoverable Card</h3>
<p class="mt-2 text-sm text-gray-600">Hover over me to see the lift effect.</p>
</div>
</div>Card Grid Layout
Cards almost always appear in grids. Use grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 on a wrapper element to create a responsive grid that shows one column on mobile, two on tablet, and three on desktop.
The gap-6 utility adds consistent spacing between cards without needing margins on individual cards, which would break grid alignment.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="a.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card One</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="b.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card Two</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="c.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card Three</h3>
</div>
</div>
</div>Profile and Avatar Cards
A profile card centers an avatar, name, role, and social links. Use a colored header band with h-24 bg-gradient-to-r from-blue-500 to-purple-600, then position the avatar to overlap the band with a negative top margin: -mt-12 mx-auto on a circular image.
This offset technique creates a layered visual effect without any absolute positioning.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-xs text-center">
<div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600"></div>
<div class="px-5 pb-5">
<img
src="avatar.jpg"
alt="Profile"
class="w-20 h-20 rounded-full border-4 border-white -mt-10 mx-auto object-cover"
/>
<h3 class="mt-2 text-lg font-bold text-gray-900">Jane Doe</h3>
<p class="text-sm text-gray-500">Frontend Developer</p>
<button class="mt-4 px-6 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">
Follow
</button>
</div>
</div>Stat and Metric Cards
Stat cards display a single key metric with an icon, number, and label. Keep them compact with p-5 padding and use flex items-center justify-between to position the icon on the right and the stat on the left.
Color-code the icon background to differentiate metrics at a glance. A green icon for revenue, blue for users, and orange for conversions creates an immediately scannable dashboard.
<div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-between">
<div>
<p class="text-sm text-gray-500 font-medium">Total Users</p>
<p class="mt-1 text-3xl font-bold text-gray-900">12,489</p>
<p class="mt-1 text-sm text-green-600 font-medium">+8.2% this month</p>
</div>
<div class="p-3 bg-blue-100 rounded-xl">
<svg class="w-7 h-7 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/>
</svg>
</div>
</div>Dark Mode Card Styling
Cards in dark mode require inverting backgrounds and adjusting text colors. Use dark:bg-gray-800 in place of bg-white, dark:text-white for headings, and dark:text-gray-400 for secondary text.
Border-based dividers also need adjustment: dark:border-gray-700 replaces border-gray-100. Apply all dark variants alongside their light counterparts so the card looks great in both themes.
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden max-w-sm">
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Dark-Mode Ready</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
This card adapts automatically to the user's preferred color scheme.
</p>
</div>
<div class="border-t border-gray-100 dark:border-gray-700 px-5 py-3 flex justify-end">
<button class="text-sm font-semibold text-blue-500 hover:text-blue-400">Action</button>
</div>
</div>Clickable Card as a Link
Wrapping an entire card in an <a> tag makes the whole surface clickable. Combine block with the card styles so the anchor behaves as a block element. Use group on the anchor to enable child hover effects — for example, group-hover:text-blue-600 on the title changes color when anywhere on the card is hovered.
This pattern avoids nested interactive elements (buttons inside links) and keeps the card accessible as a single focusable unit.
<a href="/post/tailwind-tips" class="group block bg-white rounded-xl shadow-md overflow-hidden
hover:shadow-xl transition-shadow duration-200">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
Tailwind Tips and Tricks
</h3>
<p class="mt-2 text-sm text-gray-500">Click anywhere on this card to navigate.</p>
</div>
</a>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: the three-zone card structure (image header, body, footer) built with rounded corners and shadow utilities; hover lift effects combining hover:shadow-xl hover:-translate-y-1 transition-all; and responsive card grids using grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6. Next up we explore badge and tag components.
Häufig gestellte Fragen
Ist die Lektion „Muster für Kartenkomponenten“ kostenlos?
Ja — der vollständige Text von „Muster für Kartenkomponenten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Tailwind CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Muster für Kartenkomponenten“?
Erstellen Sie Karten mit Bildkopf, Inhaltsbereich und Aktionsfußzeile mithilfe von Flex- und Grid-Layouts in einem abgerundeten Container mit Schatten. Du übst Tailwind CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Tailwind CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. Tailwind CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Muster für Kartenkomponenten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Tailwind CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede Tailwind CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Button-Varianten und -Zustände
- Muster für Kartenkomponenten
- Badge- und Tag-Komponenten
- Komponenten in einer Benutzeroberfläche kombinieren