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

Art Deco Süßigkeiten Produktkarten

Eine reaktionsschnelle Produktkartenkomponente mit einem vom Art Deco inspirierten Design und einem fröhlichen Bonbon-Farbschema, geeignet für Buchungs- und Reservierungssysteme. Enthält Unterstützung für den Dunkelmodus.

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 "Produktkarten"

Eine reaktionsschnelle Produktkartenkomponente in einem minimalistischen Stil mit pastellfarbenem Farbschema, die für Geschäfts- oder Unternehmenswebsites geeignet ist und Unterstützung für den Dunkelmodus bietet.

Offen