CCHub Logo CCHub Tailwind Collection
Komponenten Produktvergleich Produktvergleichskomponente

Produktvergleichskomponente

Eine einfache, reaktionsschnelle Produktvergleichskomponente mit einem Glasmorphismus-Design, einem Erdton-Farbschema und Unterstützung für den Dunkelmodus. Es werden zwei Produktkarten nebeneinander auf größeren Bildschirmen und gestapelt auf kleineren Bildschirmen angezeigt.

Vorschau

HTML-Code 

<div class="container mx-auto p-4">
  <div class="flex flex-col lg:flex-row gap-4">
    
    <!-- Product 1 -->
    <div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
      <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product A</h2>
      <img src="https://picsum.photos/seed/product1/4
00/300" alt="Product A" class="rounded-md mb-4">
      <p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
    </div>

    <!-- Product 2 -->
    <div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
      <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product B</h2>
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product B" class="rounded-md mb-4">
      <p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
        <li>Feature A</li>
        <li>Feature B</li>
        <li>Feature C</li>
      </ul>
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
    </div>

  </div>
</div>

Verwandte Komponenten

Produktvergleichskomponente

Produktvergleichskomponente mit minimalistischem/flachem Design, Farbschema in Erdtönen und mittlerer Komplexität für Dashboard-Zwecke mit Tailwind CSS. Die Komponente ist reaktionsschnell und unterstützt dunkles Design. Kein JavaScript.

Offen

Produktvergleichskomponente

Eine Produktvergleichskomponente mit einem brutalistischen Designstil mit leuchtenden Farben und moderater Komplexität, um Produkte zu präsentieren oder in einem Portfolio zu arbeiten.

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