Componente Schede prodotto
Un componente di schede prodotto reattivo progettato in stile brutalista con Tailwind CSS, con supporto per temi scuri e utilizzo di immagini segnaposto.
Codice HTML
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/201" alt="Product Image">
<div class="p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/202" alt="Product Image">
<div class="p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/203" alt="Product Image">
<div class="p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
</div>
</div>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 {
background-color: #2d3748;
}
.text-gray-600 {
color: #a0aec0;
}
.border-gray-300 {
border-color: #4a5568;
}
}
</style>Componenti correlati
Componente Schede prodotto
Un componente di schede prodotto reattivo progettato con elementi 3D e una combinazione di colori vivaci, che incorpora un tema scuro per il consumo di blog e contenuti. È caratterizzato da una complessità media con elementi interattivi per il coinvolgimento dell'utente.
Componente Schede prodotto
Un componente della scheda prodotto reattivo con microinterazioni, design monocromatico e supporto per temi scuri.
Componente Schede prodotto
Un componente di schede prodotto reattivo progettato utilizzando i principi di Material Design con Tailwind CSS. Supporta la modalità oscura e presenta ombre e layout basati su griglia.