CCHub Logo CCHub Tailwind Collection
Komponenten Produktkarten Skeuomorphe Produktkarte

Skeuomorphe Produktkarte

Eine Skeuomorphic Product Card-Komponente für ein Dashboard, formatiert mit Graustufen, mittlerer Komplexität, reaktionsschnell mit Dunkelmodus.

Vorschau

HTML-Code 

<div class="max-w-xs mx-auto bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
  <div class="relative">
    <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product image">
    <div class="absolute top-0 right-0 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-xs px-2 py-1 m-2 rounded-md">New</div>
  </div>
  <div class="p-4">
    <h3 class="text-gray-900 dark:text-white font-bold text-xl mb-2">Product Name</h3>
    <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features and benefits.</p>
    <div class="flex items-center justify-between">
      <span class="text-gray-900 dark:text-white font-bold text-lg">$199.99</span>
      <button class="bg-gray-600 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-500 text-white dark:text-gray-900 font-bold py-2 px-4 rounded-md">Add to Cart</button>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Produktkarten"

Produktkartenkomponente mit Brutalismus-Stil, monochromatischem Farbschema, komplexer Komplexitätsstufe für E-Commerce-Zwecke.

Offen

ArtDeco_ProductCards_Music

Einfache, ansprechende Produktkartenkomponente mit Art-Déco-Ästhetik, mit geometrischen Mustern und einem Sonnenuntergangs-/warmen Farbschema, geeignet für Musik- und Audioplattformen. Enthält Unterstützung für den Dunkelmodus.

Offen

Komponente "Skeuomorphe Produktkarten"

Einfache, reaktionsschnelle Produktkartenkomponente mit einem skeuomorphen Design in Graustufen, geeignet für Geschäfts-/Unternehmenswebsites. Enthält Unterstützung für den Dunkelmodus.

Offen