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.
HTML Code
<div class="bg-gradient-to-br from-indigo-50 to-purple-50 via-pink-50 min-h-screen p-4 sm:p-8 lg:p-12 font-sans dark:from-gray-900 dark:to-black dark:via-gray-800 text-gray-800 dark:text-gray-200">
<!-- Component Title -->
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 relative z-10 animate-fade-in-down transform scale-y-105 transition-transform duration-500 hover:scale-y-100
bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-indigo-600
dark:from-purple-400 dark:via-pink-300 dark:to-indigo-400
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-purple-200 before:via-pink-100 before:to-indigo-200 before:blur-lg before:-z-10 before:opacity-50 dark:before:from-gray-700 dark:before:via-gray-800 dark:before:to-gray-900">
Product Comparison
</h1>
<!-- Comparison Grid Container -->
<div class="grid gap-8 lg:gap-12 xl:grid-cols-3 max-w-7xl mx-auto">
<!-- Product Card 1 -->
<div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-purple-400
dark:from-gray-800 dark:to-gray-900 dark:border-purple-600
after:content-[''] after:absolute after:inset-0 after:bg-purple-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">
<!-- 3D Ribbon / Tag -->
<div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-purple-500 to-indigo-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
Popular Choice
</div>
<div class="text-center mb-6">
<img src="https://picsum.photos/seed/product1/250/180" alt="Product A" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
<h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-2">Product Alpha</h2>
<p class="text-gray-600 dark:text-gray-400">Cutting-edge features for professionals.</p>
</div>
<hr class="my-6 border-t border-gray-200 dark:border-gray-700">
<ul class="space-y-4 text-sm">
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
<svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="font-medium">Advanced AI Engine</span>
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
<svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="font-medium">Unlimited Integrations</span>
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
<svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="font-medium">24/7 Premium Support</span>
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>Limited Storage</span>
</li>
</ul>
<div class="flex justify-center mt-8">
<button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg shadow-purple-200
hover:from-purple-700 hover:to-indigo-700 hover:scale-105 hover:shadow-xl hover:shadow-purple-300
dark:from-purple-500 dark:to-indigo-500 dark:shadow-purple-700 dark:hover:from-purple-600 dark:hover:to-indigo-600 dark:hover:shadow-purple-600">
Choose Alpha
</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-pink-400
dark:from-gray-800 dark:to-gray-900 dark:border-pink-600
after:content-[''] after:absolute after:inset-0 after:bg-pink-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">
<!-- 3D Ribbon / Tag -->
<div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-pink-500 to-red-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
Best Value
</div>
<div class="text-center mb-6">
<img src="https://picsum.photos/seed/product2/250/180" alt="Product B" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
<h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 to-red-600 dark:from-pink-400 dark:to-red-400 mb-2">Product Beta</h2>
<p class="text-gray-600 dark:text-gray-400">Balanced features for everyday use.</p>
</div>
<hr class="my-6 border-t border-gray-200 dark:border-gray-700">
<ul class="space-y-4 text-sm">
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
<svg class="w-5 h-5 mr-3 text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="font-medium">Intelligent Automation</span>
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
<svg class="w-5 h-5 mr-3 text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="font-medium">100 GB Storage</span>
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>Standard Integrations</span>
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>Standard Support</span>
</li>
</ul>
<div class="flex justify-center mt-8">
<button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
bg-gradient-to-r from-pink-600 to-red-600 text-white shadow-lg shadow-pink-200
hover:from-pink-700 hover:to-red-700 hover:scale-105 hover:shadow-xl hover:shadow-pink-300
dark:from-pink-500 dark:to-red-500 dark:shadow-pink-700 dark:hover:from-pink-600 dark:hover:to-red-600 dark:hover:shadow-pink-600">
Select Beta
</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-yellow-400
dark:from-gray-800 dark:to-gray-900 dark:border-yellow-600
after:content-[''] after:absolute after:inset-0 after:bg-yellow-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">
<!-- 3D Ribbon / Tag -->
<div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-yellow-500 to-orange-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
New Arrival
</div>
<div class="text-center mb-6">
<img src="https://picsum.photos/seed/product3/250/180" alt="Product C" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
<h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-600 to-orange-600 dark:from-yellow-400 dark:to-orange-400 mb-2">Product Gamma</h2>
<p class="text-gray-600 dark:text-gray-400">Essential features for everyday users.</p>
</div>
<hr class="my-6 border-t border-gray-200 dark:border-gray-700">
<ul class="space-y-4 text-sm">
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
<svg class="w-5 h-5 mr-3 text-yellow-500 dark:text-yellow-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="font-medium">Basic Analytics</span>
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>Limited Integrations</span>
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>Community Support</span>
</li>
<li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>No AI Engine</span>
</li>
</ul>
<div class="flex justify-center mt-8">
<button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
bg-gradient-to-r from-yellow-600 to-orange-600 text-white shadow-lg shadow-yellow-200
hover:from-yellow-700 hover:to-orange-700 hover:scale-105 hover:shadow-xl hover:shadow-yellow-300
dark:from-yellow-500 dark:to-orange-500 dark:shadow-yellow-700 dark:hover:from-yellow-600 dark:hover:to-orange-600 dark:hover:shadow-yellow-600">
Choose Gamma
</button>
</div>
</div>
</div>
<!-- Key Feature Comparison Table (Optional for more complexity) -->
<div class="mt-16 bg-white dark:bg-gray-850 p-8 rounded-3xl shadow-2xl overflow-x-auto relative z-10 animate-fade-in-up
border border-gray-100 dark:border-gray-700
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-purple-50 before:via-pink-50 before:to-yellow-50 before:blur-3xl before:-z-10 before:opacity-50 dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-gray-900">
<h3 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-600 dark:from-purple-400 dark:via-pink-300 dark:to-yellow-400 mb-8 text-center">Detailed Feature Comparison</h3>
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-750">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400 rounded-tl-xl">Feature</th>
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Product Alpha</th>
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Product Beta</th>
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400 rounded-tr-xl">Product Gamma</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">AI Capabilities</td>
<td class="px-6 py-4 whitespace-nowrap text-center">
<svg class="mx-auto h-6 w-6 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center">
<svg class="mx-auto h-6 w-6 text-rose-500 dark:text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center">
<svg class="mx-auto h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Storage Capacity</td>
<td class="px-6 py-4 whitespace-nowrap text-center">Variable</td>
<td class="px-6 py-4 whitespace-nowrap text-center">100 GB</td>
<td class="px-6 py-4 whitespace-nowrap text-center">50 GB</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Integrations</td>
<td class="px-6 py-4 whitespace-nowrap text-center">Unlimited</td>
<td class="px-6 py-4 whitespace-nowrap text-center">Standard</td>
<td class="px-6 py-4 whitespace-nowrap text-center">Basic</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Support</td>
<td class="px-6 py-4 whitespace-nowrap text-center">24/7 Premium</td>
<td class="px-6 py-4 whitespace-nowrap text-center">Email/Chat</td>
<td class="px-6 py-4 whitespace-nowrap text-center">Community</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Uptime Guarantee</td>
<td class="px-6 py-4 whitespace-nowrap text-center">99.9%</td>
<td class="px-6 py-4 whitespace-nowrap text-center">99.5%</td>
<td class="px-6 py-4 whitespace-nowrap text-center">99%</td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
/* This is for the '3D' effect on images and cards */
.perspective-1000 {
perspective: 1000px;
}
.rotate-x-6 {
transform: rotateX(6deg);
}
/* Keyframe for fade-in-down animation */
@keyframes fade-in-down {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-down {
animation: fade-in-down 0.8s ease-out forwards;
}
/* Keyframe for fade-in-up animation */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fade-in-up 0.8s ease-out forwards;
}
/* Custom shadow for pseudo 3D effect on hover */
.shadow-3xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), /* Default Tailwind 2xl */
0 0 60px -15px rgba(0, 0, 0, 0.5);
}
.dark .shadow-3xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), /* Darker for dark mode */
0 0 60px -15px rgba(0, 0, 0, 0.9);
}
/* Tailwind does not have a native way to apply custom properties in CSS,
so a custom class for backdrop color is used for the overall theme. */
body {
@apply bg-gradient-to-br from-indigo-50 to-purple-50 via-pink-50 dark:from-gray-900 dark:to-black dark:via-gray-800;
}
</style>Composants associés
EarthyComparaison des produits
Un composant réactif de comparaison de produits pour le commerce électronique, avec trois fiches produits. Stylisé avec Tailwind CSS en utilisant une palette de couleurs de terre (bruns, verts, ambres) et des éléments de conception 3D simples comme des ombres et des barres d’accentuation pour plus de profondeur et d’engagement. Inclut la prise en charge du mode sombre et utilise des images de remplacement de picsum.photos.
Skeuomorphic_Product_Comparison_Component
Un composant de comparaison de produits simple et réactif avec un design skeuomorphe utilisant une palette de couleurs bleu foncé monochromatique, adapté aux applications de tableau de bord. Inclut la prise en charge du mode sombre.
Composant de comparaison de produits
Un composant de comparaison de produits de luxe/haut de gamme pour le matériel de photographie, doté d’un design élégant, d’une typographie sophistiquée et d’une palette de couleurs très contrastée. Comprend une mise en page réactive et la prise en charge du mode sombre.