Componente Schede prodotto
Componente della scheda prodotto con stile Brutalismo, combinazione di colori monocromatica, livello di complessità complesso per scopi di e-commerce.
Codice HTML
<div class="dark:bg-stone-900 bg-stone-100 p-6">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 1</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$49.99</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$59.99</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 2</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$75.00</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$90.00</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 3</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$120.00</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$150.00</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Scheda Prodotto Skeuomorphic
Un componente della scheda prodotto scheumorfico per un dashboard, con stile in scala di grigi, complessità media, reattivo con modalità scura.
Componente Schede prodotto
Un componente di schede prodotto reattivo progettato con lo stile scheumorfismo, la combinazione di colori dei toni della terra e il supporto del tema scuro. Ideale per cruscotti.
Componente Schede prodotto
Un componente di schede prodotto in stile brutalista con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.