Komponente "Produktkarten"
Eine reaktionsschnelle Produktkartenkomponente für den Dunkelmodus mit leuchtenden Farben und mehreren interaktiven Elementen, die für Blogs und den Konsum von Inhalten geeignet sind.
HTML-Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/100/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
<div class="ml-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
<p class="text-gray-400 text-sm">By: Author Name</p>
</div>
</div>
<p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
<div class="flex justify-between items-center">
<span class="text-lg text-vibrant-orange-500 font-semibold">$99.99</span>
<button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
</div>
<div class="mt-4">
<button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg mt-4">
<h2 class="text-2xl font-bold text-white mb-4">Product Title</h2>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/101/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md">
<div class="ml-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
<p class="text-gray-400 text-sm">By: Author Name</p>
</div>
</div>
<p class="text-gray-300 mb-4">This is a short description of the product. It highlights the key features and benefits of the item in a concise manner.</p>
<div class="flex justify-between items-center">
<span class="text-lg text-vibrant-orange-500 font-semibold">$79.99</span>
<button class="bg-vibrant-green-500 text-white px-4 py-2 rounded hover:bg-vibrant-green-400 transition duration-150 ease-in-out">Add to Cart</button>
</div>
<div class="mt-4">
<button class="bg-gray-700 dark:bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-600 transition duration-150 ease-in-out">Details</button>
</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 Mikrointeraktionen in Erdtönen, die Unterstützung für dunkle Themen für die Präsentation des Portfolios bietet.
Komponente "Produktkarten"
Eine reaktionsschnelle Produktkartenkomponente mit Retro-/Vintage-Design, analogem Farbschema und Unterstützung für dunkle Themen, die für ein Dashboard geeignet ist. Das Design enthält Platzhalter für Bilder und Produktdetails.