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
Componente Schede prodotto
Un semplice componente reattivo della scheda prodotto con microinterazioni, progettato per le interfacce dei social media che utilizzano Tailwind CSS, che supporta il tema scuro e la combinazione di colori in scala di grigi.
Componente Schede prodotto
Un componente di schede prodotto in stile brutalista con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente Schede prodotto
Un componente della scheda prodotto reattivo con microinterazioni, design monocromatico e supporto per temi scuri.