CCHub Logo CCHub Tailwind Collection
Komponenten Produktkarten Komponente "Produktkarten"

Komponente "Produktkarten"

Eine Produktkartenkomponente im brutalistischen Stil mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex flex-wrap justify-center p-4 bg-gray-100 dark:bg-gray-800">
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 1</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 2</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Product Image">
    <div class="p-6">
      <h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 3</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
      <div class="mt-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
      </div>
    </div>
  </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 reaktionsschnelle Produktkartenkomponente mit Mikrointeraktionen in Erdtönen, die Unterstützung für dunkle Themen für die Präsentation des Portfolios bietet.

Offen

Skeuomorphe analoge Jobkartenkomponente

Eine reaktionsschnelle Jobkartenkomponente mit einem skeuomorphen Designstil unter Verwendung eines analogen Farbschemas, geeignet für Jobbörsen und Karriereentwicklungsplattformen. Enthält Unterstützung für den Dunkelmodus.

Offen