Composant de comparaison de produits
Un composant simple de comparaison de produits conçu pour l’interface utilisateur en mode sombre à l’aide d’un jeu de couleurs en niveaux de gris. Il présente une mise en page de base avec un minimum d’éléments, idéale pour le contenu du blog et la lecture.
HTML Code
<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>Composants associés
Composant de comparaison de produits
Un composant de comparaison de produits complexe et réactif avec des éléments de conception 3D, une palette de couleurs triadique et la prise en charge du mode sombre, adapté au contexte d’un tableau de bord.
Composant de comparaison de produits
Design minimaliste / plat, palette de couleurs en niveaux de gris, composant complexe de comparaison de produits pour les médias sociaux avec un design réactif et prise en charge du thème sombre.
Composant de comparaison de produits Neumorphism
Un composant de comparaison de produits simple et réactif dans le style Neumorphism avec des tons de terre, la prise en charge du thème sombre et pas de JavaScript.