Brutalism Product Comparison Component
A brutalist-style product comparison component designed for booking/reservation systems, featuring a forest/green color palette, high contrast, and unusual layouts. It's fully responsive and supports dark mode.
HTML Code
<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>Related Components
Product Comparison Component
A responsive product comparison component with warm neutral colors and subtle neon/glow effects, designed for educational platforms. Includes dark mode support and semantic HTML.
RetroVintageProductComparison
Retro/Vintage Product Comparison Component for Dashboard. Simple monochromatic design with dark mode support. Uses Tailwind CSS.
Product Comparison Component
A responsive product comparison component with dark theme support, featuring a minimalist/flat design and a pastel color scheme. This complex component is suitable for dashboards, allowing users to compare multiple products with detailed specifications and interactive elements.