CCHub Logo CCHub Tailwind Collection
Komponenten Produktvergleich Produktvergleichskomponente

Produktvergleichskomponente

Eine komplexe Produktvergleichskomponente, die nach den Prinzipien des Materialdesigns entwickelt wurde und sich durch ein lebendiges Farbschema und Unterstützung für den Dunkelmodus auszeichnet. Ideal für Social-Media-Netzwerkschnittstellen.

Vorschau

HTML-Code 

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-white dark:bg-gray-800">
  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=1" alt="Product 1" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 1</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 1 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user1</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>

  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=2" alt="Product 2" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 2</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 2 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user2</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
    </div>
  </div>

  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
    <img src="https://picsum.photos/400/200?random=3" alt="Product 3" class="w-full h-32 object-cover">
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 3</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 3 with vibrant highlights.</p>
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
        <span class="ml-2 text-gray-700 dark:text-gray-300">@user3</span>
      </div>
      <button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</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

Brutalistischer Produktvergleich

Brutalistische Produktvergleichskomponente für Social Media mit monochromatischem Farbschema und 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