Composant de comparaison de produits
Un composant de comparaison de produits réactif avec prise en charge du thème sombre, avec un design minimaliste/plat et une palette de couleurs pastel. Ce composant complexe convient aux tableaux de bord, permettant aux utilisateurs de comparer plusieurs produits avec des spécifications détaillées et des éléments interactifs.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Product Comparison</h2>
<!-- Comparison Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-lime-50 dark:bg-lime-900">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Feature</th>
<th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product A</th>
<th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product B</th>
<th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product C</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Image</td>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productA/200/200" alt="Product A">
<p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product A</p>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productB/200/200" alt="Product B">
<p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product B</p>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productC/200/200" alt="Product C">
<p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product C</p>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Price</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$199.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$249.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$179.99</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Rating</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★☆</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★★</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★☆☆</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C1</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C2</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Availability</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 dark:text-red-400">Out of Stock</td>
</tr>
<!-- Add more rows for additional features as needed -->
</tbody>
</table>
</div>
<!-- Call to Action Buttons -->
<div class="mt-6 flex flex-col sm:flex-row justify-around items-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
Buy Product A
</button>
<button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
Buy Product B
</button>
<button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-300 cursor-not-allowed dark:bg-lime-700 dark:text-lime-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800" disabled>
Buy Product C (Out of Stock)
</button>
</div>
<!-- Additional Interactive Elements -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Product A Details Card -->
<div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product A Highlights</h3>
<ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
<li>High performance processor</li>
<li>Long-lasting battery</li>
<li>Excellent user reviews</li>
</ul>
</div>
<!-- Product B Details Card -->
<div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product B Highlights</h3>
<ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
<li>Superior camera quality</li>
<li>Sleek, slim design</li>
<li>Advanced security features</li>
</ul>
</div>
<!-- Product C Details Card -->
<div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product C Highlights</h3>
<ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
<li>Budget-friendly option</li>
<li>Good for everyday use</li>
<li>Compact and portable</li>
</ul>
</div>
</div>
<!-- User Reviews Section -->
<div class="mt-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h3>
<div class="space-y-4">
<!-- Review 1 -->
<div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Jane Doe</p>
<p class="text-sm text-yellow-500">★★★★★</p>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product B is absolutely fantastic! The camera is unreal, and it's so fast. Highly recommend!"</p>
</div>
</div>
<!-- Review 2 -->
<div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">John Smith</p>
<p class="text-sm text-yellow-500">★★★★☆</p>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product A is a solid choice for the price. Does everything I need it to do. Battery life is impressive."</p>
</div>
</div>
<!-- Review 3 -->
<div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Emily White</p>
<p class="text-sm text-yellow-500">★★★☆☆</p>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product C is okay for the budget, but you definitely get what you pay for. Wish the camera was better."</p>
</div>
</div>
</div>
</div>
</div>
Composants associés
Composant de comparaison de produits
Un composant réactif de comparaison de produits avec des éléments de conception de type 3D, la prise en charge du thème sombre et l’intégration d’images de remplacement pour la visualisation des produits et les avatars des utilisateurs à l’aide de picsum.photos et randomuser.me.
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
Un composant de comparaison de produits simple et réactif avec un design glassmorphism, une palette de couleurs de terre et une prise en charge du mode sombre. Il affiche deux fiches produits côte à côte sur des écrans plus grands et empilées sur des écrans plus petits.