Componente di confronto dei prodotti
Un semplice componente di confronto dei prodotti progettato per l'interfaccia utente in modalità scura che utilizza una combinazione di colori in scala di grigi. Presenta un layout di base con elementi minimi, ideale per i contenuti del blog e per scopi di lettura.
Codice HTML
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-2xl mx-auto">
<h2 class="text-xl font-bold mb-4">Product Comparison</h2>
<table class="min-w-full">
<thead>
<tr class="bg-gray-700">
<th class="px-4 py-2">Feature</th>
<th class="px-4 py-2">Product A</th>
<th class="px-4 py-2">Product B</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Price</td>
<td class="px-4 py-2">$199</td>
<td class="px-4 py-2">$249</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Rating</td>
<td class="px-4 py-2">⭐⭐⭐⭐</td>
<td class="px-4 py-2">⭐⭐⭐⭐⭐</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Warranty</td>
<td class="px-4 py-2">1 Year</td>
<td class="px-4 py-2">2 Years</td>
</tr>
<tr class="border-b border-gray-600">
<td class="px-4 py-2">Image</td>
<td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=1" alt="Product A" class="rounded" /></td>
<td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=2" alt="Product B" class="rounded" /></td>
</tr>
</tbody>
</table>
<div class="flex justify-between mt-4">
<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" />
<span class="ml-2">Reviewed by John Doe</span>
</div>
<a href="#" class="text-blue-400 hover:underline">Read More</a>
</div>
</div>Componenti correlati
Componente di confronto dei prodotti per il neumorfismo
Un componente di confronto dei prodotti semplice e reattivo in stile neumorfismo con toni della terra, supporto per temi scuri e assenza di JavaScript.
Confronto prodotti terrosi
Un componente reattivo per il confronto dei prodotti per l'e-commerce, con tre schede prodotto. Progettato con Tailwind CSS utilizzando una combinazione di colori dei toni della terra (marroni, verdi, ambra) e semplici elementi di design 3D come ombre e barre di accento per profondità e coinvolgimento. Include il supporto per la modalità oscura e utilizza immagini segnaposto da picsum.photos.
Componente di confronto prodotti - Acquerello/Artistico
Un componente complesso e monocromatico di confronto dei prodotti progettato per uso industriale/manifatturiero, caratterizzato da un'estetica morbida, acquerello/artistica con supporto per la modalità scura. Consente agli utenti di confrontare più prodotti fianco a fianco.