CCHub Logo CCHub Tailwind Collection
Komponenten Produktkarten Komponente "Produktkarten"

Komponente "Produktkarten"

Eine reaktionsschnelle Produktkartenkomponente mit 3D-Design, analogem Farbschema und Unterstützung für den Dunkelmodus, die für Social-Media-Schnittstellen entwickelt wurde.

Vorschau

HTML-Code 

<div class="max-w-sm mx-auto relative z-10 transform transition-transform duration-500 ease-in-out hover:scale-105">
  <div class="bg-gradient-to-br from-teal-400 via-blue-500 to-purple-600 dark:from-gray-700 dark:via-gray-800 dark:to-black shadow-xl rounded-lg overflow-hidden dark:shadow-lg">
    <div class="relative h-48">
      <img class="w-full h-full object-cover" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image">
      <div class="absolute top-0 right-0 bg-blue-600 text-white px-3 py-1 m-2 rounded-lg text-sm font-bold dark:bg-blue-400">New</div>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Awesome Product Title</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mt-1">This is a short description of the product, highlighting its key features and benefits.</p>
      <div class="flex items-center mt-4">
        <div class="text-xl font-bold text-blue-600 dark:text-blue-400">$99.99</div>
        <button class="ml-auto bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
      </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <span class="text-sm text-gray-700 dark:text-gray-400">Posted by John Doe</span>
      </div>
    </div>
  </div>
</div>

<style>
  /* Basic 3D effect. More advanced 3D requires transforms on hover/active states combined with perspective on parent. */
  .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .dark\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
</style>

Verwandte Komponenten

Produktkartenkomponente mit Benutzeroberfläche im Dunkelmodus

Produktkartenkomponente mit Dark-Mode-Benutzeroberfläche und responsiven Effekten mit Tailwind CSS.

Offen

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

Komponente "Produktkarten"

Eine responsive Produktkartenkomponente, die nach den Prinzipien des Material Designs mit Tailwind CSS entwickelt wurde. Es unterstützt den Dunkelmodus und bietet Schatten und rasterbasierte Layouts.

Offen