CCHub Logo CCHub Tailwind Collection
Komponenten Interaktive Komponenten Komponente "Interaktive Komponenten"

Komponente "Interaktive Komponenten"

Interaktive Komponentenkomponente mit Materialdesign, triadischem Farbschema, komplexer Komplexität, für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-900 p-4">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Short product description goes here. It can span a couple of lines.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Another short product description for variety and demonstration.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$249.50</span>
            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 dark:bg-red-400 dark:hover:bg-red-500">Add to Cart</button>
          </div>
        </div>
      </div>
      
       <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Yet another product description to fill the card space.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-green-600 dark:text-green-400">$145.00</span>
            <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-500">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Interaktive Komponenten"

Eine interaktive Komponente, die für Bildungsplattformen entwickelt wurde und warme Farbverläufe bei Sonnenuntergang, sanfte Übergänge und Unterstützung für den Dunkelmodus bietet. Es enthält anklickbare Karten, die das Erscheinungsbild beim Bewegen des Mauszeigers/Fokussierens ändern.

Offen

Komponente "Interaktive Komponenten"

Interaktive Komponentenkomponente mit Skeuomorphismus-Design, analogem Farbschema und mittlerer Komplexität für Blog-/Content-Zwecke. Responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript-Code.

Offen

Brutalistische Produktkarte

Eine einfache interaktive Produktkartenkomponente für den E-Commerce mit einem brutalistischen Design in Graustufen. Es verfügt über ein Produktbild, einen Titel, einen Preis und eine Schaltfläche "In den Warenkorb". Die Komponente reagiert und unterstützt den Dunkelmodus. Hover-Effekte sind für die Interaktivität enthalten.

Offen