HTML 代码
<div class="bg-white dark:bg-gray-900 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-gray-600 dark:text-gray-300 font-semibold tracking-wide uppercase">Compare</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Product Comparison</p>
</div>
<div class="mt-10">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Product 1 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product A</h3>
<p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-5">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/producta/600/400" alt="Product A">
</div>
<ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<div class="mt-6">
<button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product B</h3>
<p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-5">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/productb/600/400" alt="Product B">
</div>
<ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<div class="mt-6">
<button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product C</h3>
<p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-5">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/productc/600/400" alt="Product C">
</div>
<ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
<li>Feature X</li>
<li>Feature Y</li>
<li>Feature Z</li>
</ul>
<div class="mt-6">
<button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 lg:grid lg:grid-cols-3 lg:gap-8">
<div class="sm:col-span-3">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Comparison Table</h3>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:p-0">
<dl class="sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 1 / Feature A / Feature X</dt>
<dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 2 / Feature B / Feature Y</dt>
<dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 3 / Feature C / Feature Z</dt>
<dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>相关组件
产品对比组件 - 复古企业风格
一个响应式产品比较组件，具有复古/复古企业美学，使用单色蓝色配色方案。具有多个交互元素和深色模式支持。该设计包括带有 80 年代/90 年代灵感几何图案的复古风格卡片、老式排版和像素般的口音。非常适合希望以怀旧设计脱颖而出同时保持专业精神的商业网站。
EarthyProductComparison
适用于电子商务的响应式产品比较组件，包含三个产品卡。使用 Tailwind CSS 设置样式，使用大地色调配色方案（棕色、绿色、琥珀色）和简单的 3D 设计元素（如阴影和强调条）来增加深度和参与度。包括深色模式支持，并使用 picsum.photos 中的占位符图像。