CCHub Logo CCHub Tailwind Collection
Komponenten Produktvergleich Brutalistischer Produktvergleich

Brutalistischer Produktvergleich

Brutalistische Produktvergleichskomponente für Social Media mit monochromatischem Farbschema und Unterstützung für den Dunkelmodus

Vorschau

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>

Verwandte Komponenten

Produktvergleichskomponente

Eine verspielte und fröhliche Produktvergleichskomponente mit abgerundeten Elementen und einem komplementären Farbschema, geeignet für ein Dashboard. Verfügt über responsives Design und Unterstützung für den Dunkelmodus.

Offen

Skeuomorphic_Product_Comparison_Component

Eine einfache, reaktionsschnelle Produktvergleichskomponente mit einem skeuomorphen Design unter Verwendung eines monochromatischen dunkelblauen Farbschemas, das für Dashboard-Anwendungen geeignet ist. Enthält Unterstützung für den Dunkelmodus.

Offen

Produktvergleichskomponente

Eine Produktvergleichskomponente mit Skeuomorphismus-Designstil, Pastellfarbschema und mittlerer Komplexitätsstufe, die für Dashboards entwickelt wurde. Es enthält Responsive Design und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen