卡片组件模式
在带圆角和阴影的容器中使用 Flex 和 Grid 布局构建卡片，包括图像头部、内容主体和操作页脚。
卡片组件模式 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
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.
常见问题解答
「卡片组件模式」课时是免费的吗？
是的 — 「卡片组件模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「卡片组件模式」这节课中我会学到什么？
在带圆角和阴影的容器中使用 Flex 和 Grid 布局构建卡片，包括图像头部、内容主体和操作页脚。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「卡片组件模式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 按钮变体与状态
- 卡片组件模式
- 徽章与标签组件
- 在用户界面中组合组件