0Pricing
Tailwind CSS Academy · 강의

카드 컴포넌트 패턴

둥글고 그림자가 있는 컨테이너 안에서 flex와 grid 레이아웃을 사용해 이미지 헤더, 콘텐츠 본문, 작업 푸터가 있는 카드를 만듭니다.

카드 컴포넌트 패턴은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 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.

자주 묻는 질문

“카드 컴포넌트 패턴” 강의는 무료인가요?

네 — “카드 컴포넌트 패턴” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“카드 컴포넌트 패턴”에서 뭘 배우나요?

둥글고 그림자가 있는 컨테이너 안에서 flex와 grid 레이아웃을 사용해 이미지 헤더, 콘텐츠 본문, 작업 푸터가 있는 카드를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“카드 컴포넌트 패턴” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 버튼 변형과 상태
  2. 카드 컴포넌트 패턴
  3. 배지와 태그 컴포넌트
  4. UI에서 컴포넌트 조합하기
← Tailwind CSS Academy(으)로 돌아가기