Componente Schede prodotto
Un componente della scheda prodotto reattivo progettato per la modalità scura, con colori vivaci e molteplici elementi interattivi adatti per blog e consumo di contenuti.
Codice HTML
<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>Componenti correlati
Componente Schede prodotto
Un componente della scheda prodotto reattivo con design 3D, combinazione di colori analoga e supporto per la modalità scura, progettato per le interfacce dei social media.
Schede prodotto Componente 52
Un componente della scheda prodotto reattivo che utilizza lo stile di progettazione Glassmorphism con supporto per il tema scuro e Tailwind CSS.
Componente Schede prodotto
Un componente della scheda prodotto reattivo con design retrò/vintage, combinazione di colori analoga e supporto per temi scuri, adatto per una dashboard. Il design include segnaposto per immagini e dettagli del prodotto.