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 product comparison component with Skeuomorphism design style, Pastel color scheme, and Moderate complexity level, designed for dashboards. It includes responsive design and dark theme support using Tailwind CSS.
Product Comparison Component
A playful and cheerful product comparison component with rounded elements and a complementary color scheme, suitable for a dashboard. Features responsive design and dark mode support.
Product Comparison Component - Organic/Nature-inspired Autumn Colors
A complex, responsive product comparison component with an organic/nature-inspired design, using autumn colors. Suitable for sports and fitness applications, with full dark mode support.