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.
HTML Code
<div class="container mx-auto px-4 py-8">
<div class="dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden">
<div class="flex flex-col md:flex-row">
<!-- Product 1 -->
<div class="flex-1 p-6 dark:border-gray-700 border-b md:border-b-0 md:border-r relative">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 opacity-20"></div>
<div class="relative z-10">
<h3 class="text-xl font-semibold mb-4 dark:text-white text-gray-800">Product A</h3>
<img src="https://picsum.photos/seed/producta/400/300" alt="Product A" class="mx-auto mb-6 rounded-md shadow-md">
<ul class="text-sm dark:text-gray-300 text-gray-700 space-y-2">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<div class="mt-6 text-center">
<button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition duration-300">Learn More</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="flex-1 p-6 relative">
<div class="absolute inset-0 bg-gradient-to-br from-green-500 to-teal-600 opacity-20"></div>
<div class="relative z-10">
<h3 class="text-xl font-semibold mb-4 dark:text-white text-gray-800">Product B</h3>
<img src="https://picsum.photos/seed/productb/400/300" alt="Product B" class="mx-auto mb-6 rounded-md shadow-md">
<ul class="text-sm dark:text-gray-300 text-gray-700 space-y-2">
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<div class="mt-6 text-center">
<button class="bg-green-600 text-white px-6 py-2 rounded-full hover:bg-green-700 transition duration-300">Learn More</button>
</div>
</div>
</div>
</div>
<!-- Comparison Table (Optional addition for more detail) -->
<div class="p-6 dark:bg-gray-700 bg-gray-100">
<h4 class="text-lg font-semibold mb-4 dark:text-white text-gray-800">Detailed Comparison</h4>
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
</tr>
</thead>
<tbody class="dark:bg-gray-800 bg-white divide-y divide-gray-200 dark:divide-gray-600">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 1/A</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Maybe</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 2/B</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Some</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 3/C</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">No</td>
<td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
</tr>
</tbody>
</table>
</div>
<!-- Avatars section -->
<div class="p-6 flex justify-around items-center dark:bg-gray-700 bg-gray-100">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar 1" class="w-12 h-12 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar 2" class="w-12 h-12 rounded-full shadow-md">
<img src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar 3" class="w-12 h-12 rounded-full shadow-md">
</div>
</div>
</div>
Composants associés
Composant de comparaison de produits
Un composant de comparaison de produits skeuomorphe conçu avec Tailwind CSS avec des effets réactifs et la prise en charge des thèmes sombres.
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.
Composant de comparaison de produits
Composant de comparaison de produits avec un design minimaliste/plat, une palette de couleurs de tons de terre et une complexité modérée pour le tableau de bord à l’aide de Tailwind CSS. Le composant est réactif et prend en charge le thème sombre. Pas de JavaScript.