Componente Schede prodotto
Un componente della scheda prodotto in stile Brutalismo con contrasto elevato, effetti reattivi e supporto per la modalità scura.
Codice HTML
<div class="flex flex-wrap justify-center space-x-4 space-y-4 p-5 bg-gray-100 dark:bg-gray-800">
<div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
<p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$29.99</span>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic2/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
<p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$39.99</span>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic3/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
<p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$49.99</span>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
</div>
</div>
</div>
</div>Componenti correlati
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.
Componente Schede prodotto neumorfico - Tavolozza retrò
Un componente complesso e reattivo delle schede prodotto progettato con uno stile morbido dell'interfaccia utente neumorfica, utilizzando una tavolozza di colori retrò/vintage tenui. Le caratteristiche includono il supporto della modalità scura, ombre sottili per l'effetto di estrusione e HTML semantico per l'accessibilità. Adatto per la lettura e il consumo di contenuti, come un blog o la visualizzazione di contenuti.
Componente Schede prodotto
Un componente della scheda prodotto reattivo con design Glassmorphism, combinazione di colori in scala di grigi e supporto per temi scuri. Include più elementi interattivi adatti alle interfacce dei social media, come l'immagine del prodotto, il titolo, la descrizione, il prezzo e il pulsante Aggiungi al carrello. Il design utilizza elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Non viene utilizzato alcun Javascript, solo HTML con classi CSS Tailwind.