组件 产品比较 产品比较组件

产品比较组件

一个使用 Tailwind CSS 设计的拟物化产品比较组件,具备响应式效果和深色主题支持。

预览

HTML 代码

<div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="w-full md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product A</h2>
        <img src="https://picsum.photos/300/200?random=1" alt="Product A" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ex non quam cursus vestibulum.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 1</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 2</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 3</span>
        </div>
    </div>
    <div class="w-full md:w-1/2 p-6 border-l border-gray-300 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product B</h2>
        <img src="https://picsum.photos/300/200?random=2" alt="Product B" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
        <p class="text-gray-600 dark:text-gray-400 mt-2">Suspendisse tincidunt, nunc id congue euismod, arcu enim cursus diam, in imperdiet urna risus quis eros.</p>
        <div class="mt-4">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature A</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature B</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature C</span>
        </div>
    </div>
</div>

相关组件

产品对比组件 - Cyberpunk Retro Charity

一个简单、响应式的产品比较组件,采用赛博朋克美学设计,使用复古/复古调色板,适用于非营利组织/慈善组织。具有深色模式支持和干净、简约的布局。

打开

EarthyProductComparison

适用于电子商务的响应式产品比较组件,包含三个产品卡。使用 Tailwind CSS 设置样式,使用大地色调配色方案(棕色、绿色、琥珀色)和简单的 3D 设计元素(如阴影和强调条)来增加深度和参与度。包括深色模式支持,并使用 picsum.photos 中的占位符图像。

打开

产品比较组件

一个简单的、响应式产品比较组件,采用玻璃拟态设计、地球色调配色方案,支持暗模式。在较大的屏幕上并排显示两个产品卡,在较小的屏幕上叠放。

打开