HTML 代码
<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>