Building Cards & Components
Bring together spacing, flexbox, borders, shadows, and typography utilities to compose a complete, reusable card component from scratch.
Introduction
A card is one of the most common components in web design, and building one well requires almost every utility category covered in this course: layout, spacing, borders, rounded corners, shadows, typography, and state variants. This lesson walks through composing a complete, reusable course card step by step, tying together everything you have learned so far.
- How to structure a card container.
- How to add an image with correct cropping.
- How to lay out title, description, and metadata.
- How to add tags and a call-to-action button.
- How to make the whole card feel interactive on hover.
Starting With the Container
Every card starts with a container that defines its shape: a white background, a border or shadow to separate it from the page, rounded corners, and overflow-hidden so the image inside respects those rounded corners.
<div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm"> <!-- image and content go here --></div>Click Run to see what this code prints.
Adding an Image
A cover image uses w-full and a fixed height with object-cover, which crops the image to fill the space without distorting its aspect ratio. Because the parent has overflow-hidden, the image's corners are automatically clipped to match the card's rounded corners.
<img src="/courses/tailwind-cover.jpg" alt="Tailwind CSS course cover" class="w-full h-40 object-cover"/>Click Run to see what this code prints.
Structuring the Content Area
The content area below the image gets its own padding, separate from the image, along with a vertical stack of a title and a description using spacing utilities like space-y-2 to keep text tightly and consistently spaced.
<div class="p-5 space-y-2"> <h3 class="text-lg font-bold text-slate-900">Tailwind CSS Fundamentals</h3> <p class="text-sm text-slate-600"> Learn utility-first styling from the ground up, from spacing to responsive layouts. </p></div>Click Run to see what this code prints.
Adding Metadata and Tags
Metadata like duration or level, and small category tags, are laid out with flex and gap-* utilities, using rounded-full pill tags with a light background to keep them visually lightweight compared to the title.
<div class="flex items-center gap-2"> <span class="bg-blue-50 text-blue-700 text-xs font-medium px-2.5 py-1 rounded-full">CSS</span> <span class="bg-emerald-50 text-emerald-700 text-xs font-medium px-2.5 py-1 rounded-full">Beginner</span> <span class="text-xs text-slate-400">22 lessons</span></div>Click Run to see what this code prints.
Adding a Call-to-Action
The card finishes with a primary button, reusing the button patterns from the previous lesson. Adding pt-2 above it and w-full makes it feel anchored to the bottom of the content area and spans the full card width.
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm py-2.5 rounded-lg transition-colors"> Start Learning</button>Click Run to see what this code prints.
Making the Card Interactive
To make the whole card feel clickable, wrap it in a group class and combine hover:shadow-lg with a subtle hover:-translate-y-1 transform, so the entire card lifts slightly on hover, reinforced by a transition-all for smoothness.
<a href="/courses/tailwind" class="group block bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all"> <!-- image and content --></a>Click Run to see what this code prints.
The Complete Card
Putting every piece together produces a single, self-contained, reusable card component built entirely from utility classes, with no custom CSS required.
<a href="/courses/tailwind" class="group block bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all"> <img src="/courses/tailwind-cover.jpg" alt="Tailwind CSS course cover" class="w-full h-40 object-cover" /> <div class="p-5 space-y-3"> <div class="flex items-center gap-2"> <span class="bg-blue-50 text-blue-700 text-xs font-medium px-2.5 py-1 rounded-full">CSS</span> <span class="bg-emerald-50 text-emerald-700 text-xs font-medium px-2.5 py-1 rounded-full">Beginner</span> <span class="text-xs text-slate-400">22 lessons</span> </div> <h3 class="text-lg font-bold text-slate-900 group-hover:text-blue-600"> Tailwind CSS Fundamentals </h3> <p class="text-sm text-slate-600"> Learn utility-first styling from the ground up, from spacing to responsive layouts. </p> <button class="w-full bg-blue-600 group-hover:bg-blue-700 text-white font-semibold text-sm py-2.5 rounded-lg transition-colors"> Start Learning </button> </div></a>Click Run to see what this code prints.
Common Mistakes
- Forgetting overflow-hidden on the card container, which lets the image's square corners poke out past the card's rounded corners.
- Skipping object-cover on images, causing them to stretch or squash to fit their container.
- Nesting a <button> or <a> inside another <a> element, which is invalid HTML and breaks click behavior.
- Forgetting the group class when using group-hover: utilities on child elements, so hover effects never trigger.
- Not testing the card at multiple widths, since long titles or descriptions can break the intended layout.
Best Practices
- Build cards from small, single-purpose sections (image, metadata, title, description, action) rather than one dense block of classes.
- Use group and group-hover: to coordinate hover effects across multiple child elements at once.
- Reuse the exact same button, tag, and spacing patterns established in earlier lessons for visual consistency.
- Wrap the whole card in a single <a> tag when the entire card should be clickable, rather than only the button.
- Extract the finished card into a reusable component once the design is finalized, instead of repeating the full class list everywhere.
Frequently Asked Questions
group itself applies no styles. It simply marks an element so that any descendant using a group-hover:, group-focus:, or similar variant can react to that specific ancestor's state, instead of only its own.
object-cover keeps the image's natural aspect ratio while filling the given width and height, cropping any excess. A fixed size alone would stretch or squash images that do not match that exact ratio.
Generally yes, for visual consistency. Combine a CSS grid or flex row with h-full on the card and flex flex-col on its content so descriptions of different lengths do not throw off the button's position.
Key Takeaways
- A card container combines a background, border or shadow, rounded corners, and overflow-hidden.
- object-cover keeps images correctly cropped without distortion.
- space-y-* and gap-* keep title, description, and metadata cleanly spaced.
- group and group-hover: coordinate hover effects across multiple elements inside the same card.
- Complex components are just a composition of the same small utilities used throughout this course.
Summary
Building this card component shows how Tailwind's utility-first approach scales from simple boxes all the way up to polished, interactive, real-world components, all without leaving your markup or writing custom CSS. With flexbox, grid, spacing, color, borders, shadows, and state variants now in your toolkit, you are ready to compose full page layouts. Next, you will apply these skills to build a complete, responsive navigation bar.