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 microinterazioni nei toni della Terra, che fornisce supporto a tema scuro per la presentazione del portfolio.
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.
Componente Schede prodotto
Un componente della scheda prodotto reattivo progettato in stile Material Design, con una combinazione di colori in scala di grigi. Include un'immagine, un titolo, una descrizione e un pulsante con supporto per la modalità oscura utilizzando Tailwind CSS.