Componente di confronto dei prodotti
Un complesso componente di confronto dei prodotti progettato con i principi del Material Design, caratterizzato da una combinazione di colori vivaci e supporto per la modalità scura. Ideale per le interfacce di rete dei social media.
Codice HTML
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-white dark:bg-gray-800">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
<img src="https://picsum.photos/400/200?random=1" alt="Product 1" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 1</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 1 with vibrant highlights.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
<span class="ml-2 text-gray-700 dark:text-gray-300">@user1</span>
</div>
<button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
<img src="https://picsum.photos/400/200?random=2" alt="Product 2" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 2</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 2 with vibrant highlights.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
<span class="ml-2 text-gray-700 dark:text-gray-300">@user2</span>
</div>
<button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
<img src="https://picsum.photos/400/200?random=3" alt="Product 3" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 3</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 3 with vibrant highlights.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
<span class="ml-2 text-gray-700 dark:text-gray-300">@user3</span>
</div>
<button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
</div>
</div>
</div>Componenti correlati
Componente di confronto dei prodotti
Un componente di confronto dei prodotti reattivo con supporto per il tema scuro, caratterizzato da un design minimalista/piatto e una combinazione di colori pastello. Questo componente complesso è adatto per le dashboard, consentendo agli utenti di confrontare più prodotti con specifiche dettagliate ed elementi interattivi.
Componente di confronto dei prodotti - Monospace/Stile sviluppatore
Un componente di confronto prodotti complesso e reattivo progettato con un'estetica monospace/sviluppatore, con una combinazione di colori viola/viola. Ideale per applicazioni sportive e di fitness, è dotato di supporto per la modalità scura e di un look pulito ispirato al terminale con molteplici punti di confronto.
Componente di confronto dei prodotti
Un componente reattivo per il confronto dei prodotti con elementi di design simili a 3D, supporto per temi scuri e integrazione di immagini segnaposto per la visualizzazione dei prodotti e avatar degli utenti utilizzando picsum.photos e randomuser.me.