Componentes Comparación de productos Comparación de productos brutalistas

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

Vista previa

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

Un componente de comparación de productos con un estilo de diseño brutalista, con colores vibrantes y complejidad moderada para exhibir productos o trabajar en un portafolio.

Abrir

RetroVintageComparación de Productos

Componente de comparación de productos retro/vintage para el salpicadero. Diseño monocromático simple con soporte para modo oscuro. Utiliza Tailwind CSS.

Abrir

Componente de comparación de productos

Un componente de comparación de productos skeuomórfico diseñado con Tailwind CSS que presenta efectos responsivos y compatibilidad con temas oscuros.

Abrir