CCHub Logo CCHub Tailwind Collection
Komponenten Produktkarten Komponente "Produktkarten"

Komponente "Produktkarten"

Eine reaktionsschnelle Produktkartenkomponente für den Dunkelmodus mit leuchtenden Farben und mehreren interaktiven Elementen, die für Blogs und den Konsum von Inhalten geeignet sind.

Vorschau

HTML-Code 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
  <div class="flex items-center mb-4">
    <img src="https://picsum.photos/id/100/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
    <div class="ml-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
      <p class="text-gray-400 text-sm">By: Author Name</p>
    </div>
  </div>
  <p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
  <div class="flex justify-between items-center">
    <span class="text-lg text-vibrant-orange-500 font-semibold">$99.99</span>
    <button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
  </div>
  <div class="mt-4">
    <button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
  </div>
</div>

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg mt-4">
  <h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
  <div class="flex items-center mb-4">
    <img src="https://picsum.photos/id/101/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
    <div class="ml-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
      <p class="text-gray-400 text-sm">By: Author Name</p>
    </div>
  </div>
  <p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
  <div class="flex justify-between items-center">
    <span class="text-lg text-vibrant-orange-500 font-semibold">$79.99</span>
    <button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
  </div>
  <div class="mt-4">
    <button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
  </div>
</div>

Verwandte Komponenten

Skeuomorphe Produktkarte

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

Offen

Komponente "Produktkarten"

Eine einfache, reaktionsschnelle Produktkartenkomponente mit Mikrointeraktionen, die für Social-Media-Schnittstellen mit Tailwind CSS entwickelt wurde und dunkle Themen und Graustufen-Farbschemata unterstützt.

Offen

Komponente "Produktkarten"

Eine responsive Produktkartenkomponente mit 3D-Elementen und einem lebendigen Farbschema, das ein dunkles Thema für den Konsum von Blogs und Inhalten enthält. Es zeichnet sich durch eine mittlere Komplexität mit interaktiven Elementen für die Benutzerbindung aus.

Offen