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.
Codice HTML
<div class="flex flex-wrap justify-center p-4">
<!-- Product Card -->
<div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Brief description of the product that highlights its features and benefits.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Designer</p>
</div>
</div>
</div>
</div>
<!-- Repeat for more products -->
<div class="max-w-xs rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800 transition-transform transform hover:scale-105 mx-4 mb-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Another product description highlighting its unique aspects.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Developer</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
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.
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 semplice componente della scheda prodotto per l'e-commerce progettato in stile Material Design utilizzando una combinazione di colori in scala di grigi e un design reattivo con supporto per il tema scuro.