产品对比组件
一个简单、响应迅速的商品比较组件，具有 Memphis Design 的美感，使用复古/复古调色板。它专为 CRM/业务工具而设计，支持深色模式并显示两种产品的关键功能。
HTML 代码
<div class="bg-amber-100 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-teal-400 mb-8 text-center tracking-tight uppercase relative">
<span class="block">Compare Products</span>
<span class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-2 bg-pink-500 dark:bg-purple-500 rounded-full mt-2"></span>
</h2>
<div class="flex flex-col md:flex-row gap-6 lg:gap-8 justify-center items-stretch">
<!-- Product Card 1 -->
<div class="flex-1 bg-yellow-300 dark:bg-gray-800 rounded-3xl p-6 lg:p-8 shadow-xl relative overflow-hidden transform hover:scale-102 transition-all duration-300
border-4 border-blue-600 dark:border-teal-500 border-l-0 border-b-0 border-r-0 border-t-0 animate-pulse-border">
<div class="absolute top-0 right-0 w-24 h-24 bg-pink-500 dark:bg-purple-600 -rotate-45 transform translate-x-12 -translate-y-12"></div>
<div class="absolute bottom-0 left-0 w-32 h-32 bg-teal-400 dark:bg-pink-600 rotate-45 transform -translate-x-16 translate-y-16"></div>
<div class="relative z-10">
<h3 class="text-2xl font-bold text-blue-800 dark:text-yellow-300 mb-4 text-center uppercase tracking-wider">Business Pro</h3>
<div class="flex justify-center mb-6">
<img src="https://picsum.photos/id/1015/150/150" alt="Product Lite" class="rounded-full w-24 h-24 object-cover border-4 border-blue-600 dark:border-teal-500 shadow-md">
</div>
<p class="text-gray-700 dark:text-gray-300 text-center mb-6 leading-relaxed">The essential tools for growing teams.</p>
<ul class="space-y-3 mb-6 text-gray-800 dark:text-gray-200">
<li class="flex items-center text-sm sm:text-base">
<svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="font-semibold">Unlimited</span> CRM Contacts
</li>
<li class="flex items-center text-sm sm:text-base">
<svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="font-semibold">Email</span> Marketing Suite
</li>
<li class="flex items-center text-sm sm:text-base">
<svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="font-semibold">Basic</span> Analytics Dashboard
</li>
</ul>
<div class="text-center">
<a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 mt-4 relative overflow-hidden group">
<span class="relative z-10">Choose Product Pro</span>
<span class="absolute inset-0 bg-blue-700 dark:bg-teal-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</a>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="flex-1 bg-red-300 dark:bg-gray-800 rounded-3xl p-6 lg:p-8 shadow-xl relative overflow-hidden transform hover:scale-102 transition-all duration-300
border-4 border-pink-600 dark:border-purple-500 border-l-0 border-b-0 border-r-0 border-t-0 animate-pulse-border">
<div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 dark:bg-teal-600 rotate-45 transform translate-x-16 -translate-y-16"></div>
<div class="absolute bottom-0 left-0 w-24 h-24 bg-yellow-500 dark:bg-pink-600 -rotate-45 transform -translate-x-12 translate-y-12"></div>
<div class="relative z-10">
<h3 class="text-2xl font-bold text-pink-700 dark:text-purple-300 mb-4 text-center uppercase tracking-wider">Enterprise Max</h3>
<div class="flex justify-center mb-6">
<img src="https://picsum.photos/id/1025/150/150" alt="Product Pro" class="rounded-full w-24 h-24 object-cover border-4 border-pink-600 dark:border-purple-500 shadow-md">
</div>
<p class="text-gray-700 dark:text-gray-300 text-center mb-6 leading-relaxed">The ultimate solution for large-scale operations.</p>
<ul class="space-y-3 mb-6 text-gray-800 dark:text-gray-200">
<li class="flex items-center text-sm sm:text-base">
<svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="font-semibold">Unlimited</span> CRM Contacts
</li>
<li class="flex items-center text-sm sm:text-base">
<svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="font-semibold">Advanced</span> Marketing Automation
</li>
<li class="flex items-center text-sm sm:text-base">
<svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="font-semibold">Custom</span> Reporting Engine
</li>
<li class="flex items-center text-sm sm:text-base">
<svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="font-semibold">Dedicated</span> Account Manager
</li>
</ul>
<div class="text-center">
<a href="#" class="inline-block bg-pink-600 hover:bg-pink-700 dark:bg-purple-500 dark:hover:bg-purple-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 mt-4 relative overflow-hidden group">
<span class="relative z-10">Choose Enterprise Max</span>
<span class="absolute inset-0 bg-pink-700 dark:bg-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* Define pulse-border animation */
@keyframes pulse-border {
0% { border-color: rgba(96, 165, 250, 0.5); }
50% { border-color: rgba(96, 165, 250, 1); }
100% { border-color: rgba(96, 165, 250, 0.5); }
}
.dark .animate-pulse-border {
animation: none; /* Disable on dark mode to prevent visual conflict with dark color scheme */
}
.animate-pulse-border {
animation: pulse-border 2s infinite ease-in-out;
}
/* Adjust for dark mode borders here if a similar effect is desired with dark colors */
.dark .bg-gray-800.border-teal-500.dark\\:border-teal-500 {
animation: pulse-border-dark 2s infinite ease-in-out;
}
.dark .bg-gray-800.border-purple-500.dark\\:border-purple-500 {
animation: pulse-border-darker 2s infinite ease-in-out;
}
@keyframes pulse-border-dark {
0% { border-color: rgba(20, 184, 166, 0.5); }
50% { border-color: rgba(20, 184, 166, 1); }
100% { border-color: rgba(20, 184, 166, 0.5); }
}
@keyframes pulse-border-darker {
0% { border-color: rgba(168, 85, 247, 0.5); }
50% { border-color: rgba(168, 85, 247, 1); }
100% { border-color: rgba(168, 85, 247, 0.5); }
}
</style>