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"

Responsive Produktkarten mit Glassmorphism-Milchglaseffekt in Pastellfarben, mit Unterstützung des Dunkelmodus. Geeignet für Social-Media-Schnittstellen.

Offen

Neumorphic Product Cards Komponente - Retro Palette

Eine komplexe, reaktionsschnelle Produktkartenkomponente, die mit einem weichen Neumorphic-UI-Stil und einer gedämpften Retro-/Vintage-Farbpalette gestaltet wurde. Zu den Funktionen gehören die Unterstützung des Dunkelmodus, subtile Schatten für den Extrusionseffekt und semantisches HTML für die Barrierefreiheit. Geeignet zum Lesen und Konsumieren von Inhalten, wie z. B. einem Blog oder der Anzeige von Inhalten.

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