Grid System Showcase
Tailwind의 12-column grid 시스템 예제
Flexbox Layouts
다양한 flexbox 패턴과 정렬 방식
Max-width container with auto margins for perfect centering
Container Variants
반응형 컨테이너 스타일
Aspect Ratio Boxes
16:9, 4:3, 1:1 비율 박스
Split Screen Layout
50/50 분할 레이아웃
Hero Section
Beautiful gradient hero with Tailwind
Hero Sections
Gradient, image, video 배경 히어로
Card Title
Card description text
Featured Card
With accent border
Card Designs
4가지 카드 스타일 변형
Button Variants
Primary, secondary, outline, ghost 버튼
Form Elements
Input, select, checkbox 스타일
Badges & Tags
Color variants 배지
Alert Messages
Success, warning, error, info 알림
Progress Bars
Determinate, indeterminate 프로그레스
Skeleton Loaders
Loading state placeholders
Tabs & Accordions
Interactive 컴포넌트
Pagination
Page number navigation
Product Name
$99.00
Product Cards
Image, title, price 카드
Shopping Cart
Shopping Cart Drawer
Slide-out 장바구니
Checkout Steps
Step indicator
Filters
Filter Sidebar
Checkbox filters
Product Gallery
Image carousel
Responsive Breakpoints
Mobile, tablet, desktop 상태 표시
Responsive text sizing
Mobile-First Patterns
Mobile-first 접근 방식 예제
Dark Mode
Toggle between light and dark themes
Dark Mode Toggle
Light/dark 테마 전환
Gradient Backgrounds
Modern gradient 예제
Glassmorphism
Frosted glass effect with backdrop blur
Glassmorphism
Frosted glass effect
Ring & Shadow Utilities
Focus states and shadows
Transform & Transitions
Hover effects
Arbitrary Values
Custom spacing, colors