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.
Codice HTML
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
<div class="mt-4">
<a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
</div>
</div>
</div>
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/301" alt="Product Image">
<div class="p-4">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
<div class="mt-4">
<a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
</div>
</div>
</div>
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/302" alt="Product Image">
<div class="p-4">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
<div class="mt-4">
<a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
</div>
</div>
</div>
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
<div class="flex items-center p-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-3">
<h3 class="text-gray-800 dark:text-gray-200 font-bold">User Name</h3>
<p class="text-gray-600 dark:text-gray-400">Product Owner</p>
</div>
</div>
</div>Componenti correlati
ArtDeco_ProductCards_Music
Componente di schede prodotto semplice e reattivo con un'estetica Art Déco, caratterizzato da motivi geometrici e una combinazione di colori tramonto/caldo, adatto per piattaforme musicali e audio. Include il supporto per la modalità oscura.
Componente Schede prodotto
Un componente di schede prodotto complesso e reattivo per piattaforme di intrattenimento/multimediali, caratterizzato da un design organico/ispirato alla natura che utilizza una tavolozza foresta/verde. Include il supporto per la modalità oscura ed elementi interattivi.
Componente Schede prodotto
Schede prodotto Componente per i social media con una combinazione di colori triadica scura e complessità moderata. Utilizza Tailwind CSS per un design reattivo con supporto per la modalità oscura e include segnaposto per immagini e avatar.