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
Componente della scheda prodotto con stile Brutalismo, combinazione di colori monocromatica, livello di complessità complesso per scopi di e-commerce.
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 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.