Brutalist Product Comparison
Brutalist Product Comparison Component for Social Media with Monochromatic color scheme and dark mode support
HTML Code
<div class="bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white p-4">
<h2 class="text-2xl font-bold mb-4 border-b-2 border-zinc-900 dark:border-white pb-2">Compare Products</h2>
<div class="grid grid-cols-2 gap-4">
<div class="border-2 border-zinc-900 dark:border-white p-4">
<h3 class="text-xl font-semibold mb-2">Product A</h3>
<img src="https://picsum.photos/seed/producta/200/150" alt="Product A" class="mb-2 w-full h-auto">
<ul class="list-disc list-inside">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
</div>
<div class="border-2 border-zinc-900 dark:border-white p-4">
<h3 class="text-xl font-semibold mb-2">Product B</h3>
<img src="https://picsum.photos/seed/productb/200/150" alt="Product B" class="mb-2 w-full h-auto">
<ul class="list-disc list-inside">
<li>Feature X</li>
<li>Feature Y</li>
<li>Feature Z</li>
</ul>
</div>
</div>
</div>Related Components
Product Comparison Component
Product Comparison Component with Minimalist/Flat Design, Earth tones color scheme, and Moderate complexity for Dashboard purpose using Tailwind CSS. The component is responsive and supports dark theme. No JavaScript.
Product Comparison Component
A luxury/premium product comparison component for photography gear, featuring elegant design, sophisticated typography, and a high-contrast color scheme. Includes responsive layout and dark mode support.
Product Comparison Component
A simple, playful product comparison component designed with autumn colors, suitable for documentation or wiki sites. Features rounded elements, full responsiveness, and dark mode support.