# Card Components > 8 card variants: product, profile, pricing, stat, testimonial, blog, feature, and glass morphism > 8가지 카드 변형: 제품, 프로필, 가격, 통계, 후기, 블로그, 기능, 글래스모피즘 **Category**: Components | **Tags**: cards, ui, tailwind, responsive, glassmorphism | **Difficulty**: Beginner ## Preview ``` +----------+ +----------+ +----------+ +----------+ | Product | | Profile | | Pricing | | Stat | | [image] | | [avatar] | | $29/mo | | 12,421 | | Name $49 | | Jane Doe | | [CTA] | | +12% | +----------+ +----------+ +----------+ +----------+ +----------+ +----------+ +----------+ +----------+ |Testimonl | | Blog | | Feature | | Glass | | "Quote" | | [thumb] | | [icon] | | Frosted | | - Author | | Title... | | Desc... | | effect | +----------+ +----------+ +----------+ +----------+ ``` ## Quick Start ```bash # 1. Copy any card component below into your project # 2. Each card is self-contained - mix and match freely # 3. All cards are responsive and support dark mode ``` ## Full Code ```html Card Components

Card Components

NEW
📰

Wireless Headphones

$49

Premium noise-cancelling with 30hr battery life.

★★★★★ (128)
JD

Jane Doe

Senior Frontend Engineer

Building beautiful interfaces at scale. React, TypeScript, and design systems.

142
Posts
3.2K
Followers
89
Following
POPULAR

Pro Plan

$29/mo
  • ✓ 25 team members
  • ✓ 100GB storage
  • ✓ Advanced analytics
  • ✓ Priority support
📈
+12.5%
12,421
Total Customers
72% of yearly target
★★★★★

"This product completely transformed our workflow. We went from 3 hours of manual work to 15 minutes. The ROI was visible within a week."

AK
Alex Kim
CTO, TechNova
📝
Tutorial 5 min read

Building a Real-time Dashboard with React and WebSockets

Learn how to create a responsive real-time dashboard with live data streaming using React hooks and native WebSocket API.

SM
Sarah Miller · Mar 25, 2026
⚡

Lightning Fast

Sub-100ms response times powered by edge computing. Your users feel the speed difference instantly.

Learn more →
💎

Glass Morphism

A frosted glass effect using backdrop-filter and semi-transparent backgrounds for a modern, layered aesthetic.

``` ## Customization Guide - **Product card**: Replace gradient background with `` tag for real product photos - **Profile card**: Use real avatar images instead of initials - **Pricing card**: Change the accent color and update feature list - **Stat card**: Wire up to real-time API data with JavaScript - **Blog card**: Add `line-clamp-2` utility for consistent excerpt height - **Glass card**: Works best on dark or gradient backgrounds; adjust `rgba` values for transparency - **All cards**: Change `rounded-2xl` to `rounded-xl` or `rounded-lg` for different border radius ## 2026 Trend Notes - Glassmorphism (`backdrop-filter: blur`) continues as a premium design pattern - Subtle hover transforms (`group-hover:scale-110`) on icons add interactivity - Color-coded badges (NEW, POPULAR) improve visual scanning - Progress bars inside stat cards provide goal context - `line-clamp` utility prevents text overflow in variable-content cards