Komponente "Produktkarten"
Eine responsive Produktkartenkomponente mit Glassmorphism-Design, Graustufen-Farbschema und Unterstützung für dunkle Themen. Es enthält mehrere interaktive Elemente, die für Social-Media-Schnittstellen geeignet sind, wie z. B. Produktbild, Titel, Beschreibung, Preis und Schaltfläche "In den Warenkorb". Das Design verwendet frosterglasähnliche, durchscheinende Elemente mit Unschärfeeffekten. Es wird kein Javascript verwendet, nur HTML mit Tailwind CSS-Klassen.
HTML-Code
<div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-100 dark:bg-gray-900">
<!-- Product Card 1 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=1"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$120.00
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">John Doe</p>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=2"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$99.50
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/women/2.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">Jane Smith</p>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div
class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
style="backdrop-filter: blur(10px);"
>
<img
class="object-cover w-full h-64"
src="https://picsum.photos/400/250?random=3"
alt="Product Image"
/>
<div
class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
></div>
<div class="relative p-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
$249.99
</span>
<button
class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
>
View Details
</button>
</div>
<div class="flex items-center mt-4">
<img
class="w-10 h-10 mr-4 rounded-full"
src="https://randomuser.me/api/portraits/men/3.jpg"
alt="Avatar"
/>
<p class="text-gray-700 dark:text-gray-400">Peter Jones</p>
</div>
</div>
</div>
</div>
Verwandte Komponenten
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.
Komponente "Produktkarten"
Einfache, reaktionsschnelle Produktkarten mit Aquarell-/Kunstdesign, komplementärem Farbschema und vollständiger Unterstützung des Dunkelmodus, geeignet für ein Portfolio.