Componente Schede prodotto
Un componente di schede prodotto in stile brutalista con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-wrap justify-center p-4 bg-gray-100 dark:bg-gray-800">
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 1</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 2</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 3</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente Schede prodotto
Un componente della scheda prodotto reattivo con design 3D, combinazione di colori analoga e supporto per la modalità scura, progettato per le interfacce dei social media.
Componente Schede prodotto
Un componente della scheda prodotto in stile Brutalismo con contrasto elevato, effetti reattivi e supporto per la modalità scura.
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.