Comparación de productos brutalistas
Componente de comparación de productos brutalista para redes sociales con esquema de color monocromático y compatibilidad con modo oscuro
Código HTML
<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>Componentes relacionados
Componente de comparación de productos - Colores otoñales orgánicos/inspirados en la naturaleza
Un componente de comparación de productos complejo y receptivo con un diseño inspirado en lo orgánico y la naturaleza, utilizando colores otoñales. Adecuado para aplicaciones deportivas y de fitness, con soporte completo para el modo oscuro.
EarthyProductComparison
Un componente de comparación de productos responsivo para el comercio electrónico, con tres tarjetas de producto. Diseñado con Tailwind CSS utilizando una combinación de colores en tonos tierra (marrones, verdes, ámbares) y elementos de diseño 3D simples como sombras y barras de acento para mayor profundidad y compromiso. Incluye soporte para el modo oscuro y utiliza imágenes de marcador de posición de picsum.photos.
Componente de comparación de productos
Un componente de comparación de productos responsivo con soporte para temas oscuros, con un diseño minimalista/plano y una combinación de colores pastel. Este componente complejo es adecuado para tableros, lo que permite a los usuarios comparar múltiples productos con especificaciones detalladas y elementos interactivos.