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.
HTML-Code
<div class="flex flex-wrap justify-center space-x-4 space-y-4 p-6 bg-white dark:bg-gray-900">
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-red-400 to-orange-400 dark:from-red-600 dark:to-orange-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Product Title</h2>
<p class="text-gray-800 dark:text-gray-400">This is a brief description of the product that engages the reader's attention.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-blue-400 to-purple-400 dark:from-blue-600 dark:to-purple-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Another Product Title</h2>
<p class="text-gray-800 dark:text-gray-400">This product offers great features and has received positive feedback from users.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-green-400 to-teal-400 dark:from-green-600 dark:to-teal-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-white dark:text-gray-200">Exciting New Product</h2>
<p class="text-gray-800 dark:text-gray-400">Discover the amazing capabilities of this product that make your life easier.</p>
<div class="flex items-center space-x-2 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>
</div>
</div>Verwandte Komponenten
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.
Komponente "Produktkarten"
Eine Produktkartenkomponente im Brutalismus-Stil mit hohem Kontrast, reaktionsschnellen Effekten und Unterstützung für den Dunkelmodus.
Komponente "Produktkarten"
Eine reaktionsschnelle Produktkartenkomponente mit einem Skeuomorphismus-Designstil, einem Erdton-Farbschema und komplexen Interaktionen, die sich für ein Portfolio eignen. Es bietet Unterstützung für dunkle Themen und verwendet Tailwind CSS für das Styling. Die Bilder stammen von picsum.photos und die Avatare von randomuser.me.