Brutalism 제품 비교 구성 요소
예약/예약 시스템을 위해 설계된 브루탈리즘 스타일의 제품 비교 구성 요소로, 숲/녹색 색상 팔레트, 고대비 및 특이한 레이아웃을 특징으로 합니다. 완벽하게 반응하며 다크 모드를 지원합니다.
HTML 코드
<div class="font-mono min-h-screen bg-lime-100 text-lime-950 p-4 dark:bg-lime-950 dark:text-lime-50 font-bold">
<div class="container mx-auto max-w-7xl border-2 border-lime-950 dark:border-lime-50 p-6 shadow-[8px_8px_0_0_rgba(27,33,16,1)] dark:shadow-[8px_8px_0_0_rgba(236,252,203,1)]">
<h1 class="text-4xl md:text-5xl lg:text-6xl text-center mb-10 uppercase leading-none border-b-4 border-lime-950 pb-4 dark:border-lime-50">
APPOINTMENT SELECTION MATRIX
</h1>
<!-- Comparison Table Header -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 mb-4 text-center border-b-2 border-lime-950 pb-2 dark:border-lime-50">
<div class="hidden md:block text-left text-xl lg:text-2xl pt-2">FEATURE<span class="md:hidden lg:inline">S</span></div>
<div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-300 dark:bg-lime-700 uppercase transform -rotate-1 skew-x-3 shadow-md border-b-8 border-r-8 dark:border-lime-50">BASIC</div>
<div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-emerald-500 text-lime-50 transform rotate-1 -skew-x-3 shadow-lg dark:bg-emerald-800 dark:text-lime-50 border-b-8 border-r-8 dark:border-lime-50">PREMIUM</div>
<div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-800 text-lime-50 transform -rotate-2 skew-x-5 shadow-2xl dark:bg-lime-900 border-b-8 border-r-8 dark:border-lime-50">ELITE</div>
</div>
<!-- Comparison Rows -->
<div class="space-y-4">
<!-- Feature Row 1 -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
<div class="text-lg md:text-xl p-2">Duration</div>
<div class="text-lg p-2 text-center">30 min</div>
<div class="text-lg p-2 text-center">60 min</div>
<div class="text-lg p-2 text-center">90 min</div>
</div>
<!-- Feature Row 2 -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
<div class="text-lg md:text-xl p-2">Consultation</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
</div>
<!-- Feature Row 3 -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
<div class="text-lg md:text-xl p-2">Priority Support</div>
<div class="text-center text-lime-600 dark:text-lime-400 text-xl">✗</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
</div>
<!-- Feature Row 4 -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
<div class="text-lg md:text-xl p-2">Follow-up</div>
<div class="text-center text-lime-600 dark:text-lime-400 text-xl">✗</div>
<div class="text-center text-lime-600 dark:text-lime-400 text-xl">✗</div>
<div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">✓</div>
</div>
<!-- Feature Row 5 (Image Example) -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
<div class="text-lg md:text-xl p-2">Resource Access</div>
<div class="p-2 flex justify-center">
<img src="https://picsum.photos/40/40?random=1" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-3">
</div>
<div class="p-2 flex justify-center">
<img src="https://picsum.photos/40/40?random=2" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform -rotate-3">
</div>
<div class="p-2 flex justify-center">
<img src="https://picsum.photos/40/40?random=3" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-5">
</div>
</div>
<!-- Feature Row 6 (Avatar Example) -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
<div class="text-lg md:text-xl p-2">Dedicated Agent</div>
<div class="p-2 flex justify-center">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
</div>
<div class="p-2 flex justify-center">
<img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
</div>
<div class="p-2 flex justify-center">
<img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
</div>
</div>
</div>
<!-- Action Buttons / Prices -->
<div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center mt-8 border-t-2 border-lime-950 pt-4 dark:border-lime-50">
<div class="hidden md:block text-left text-xl lg:text-2xl pt-2">PRICE</div>
<div class="text-center flex flex-col items-center bg-lime-300 dark:bg-lime-700 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-md transform skew-y-1">
<span class="text-3xl lg:text-4xl">$49</span>
<a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
</div>
<div class="text-center flex flex-col items-center bg-emerald-500 text-lime-50 dark:bg-emerald-800 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-lg transform -skew-y-1">
<span class="text-3xl lg:text-4xl">$99</span>
<a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
</div>
<div class="text-center flex flex-col items-center bg-lime-800 text-lime-50 dark:bg-lime-900 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-2xl transform skew-y-2">
<span class="text-3xl lg:text-4xl">$149</span>
<a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
</div>
</div>
<div class="mt-10 text-sm text-center border-t-2 border-lime-950 pt-4 dark:border-lime-50">
<p class="mb-2">*All prices are subject to change without notice.</p>
<p>Booking slots are limited. Secure your appointment now.</p>
</div>
</div>
</div>관련 구성 요소
제품 비교 구성 요소
회색조 색 구성표를 사용하는 어두운 모드 UI용으로 설계된 간단한 제품 비교 구성 요소입니다. 최소한의 요소로 구성된 기본 레이아웃이 특징이며 블로그 콘텐츠 및 읽기 목적에 이상적입니다.
Cyberpunk 제품 비교 구성 요소
이벤트/컨퍼런스 웹 사이트를 위한 간단하고 미래 지향적인 제품 비교 구성 요소로, 어두운 배경, 시원한 중성색, 사이버펑크 미학을 위한 네온 액센트가 특징입니다. 다크 모드 지원으로 반응형.
제품 비교 구성 요소 - Cyberpunk Retro Charity
레트로/빈티지 색상 팔레트를 사용하여 사이버펑크 미학으로 디자인된 간단하고 반응이 빠른 제품 비교 구성 요소로, 비영리/자선 단체를 위해 고안되었습니다. 다크 모드 지원과 깔끔하고 미니멀한 레이아웃이 특징입니다.