Product Comparison Component
Minimalist/Flat Design, Grayscale color scheme, complex product comparison component for social media with responsive design and dark theme support.
HTML Code
<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>Related Components
Product Comparison Component
A simple, responsive product comparison component with dark mode support using Tailwind CSS. Displays product names, features, and pricing for comparison.
Product Comparison Component - Retro Corporate Style
A responsive product comparison component with a retro/vintage corporate aesthetic using monochromatic blue color scheme. Features multiple interactive elements and dark mode support. The design includes retro-styled cards with 80s/90s inspired geometric patterns, old-school typography, and pixel-like accents. Perfect for business websites wanting to stand out with nostalgic design while maintaining professionalism.
Product Comparison Component
A responsive product comparison component styled in a Retro/Vintage aesthetic from the 80s/90s, featuring dark theme support with Tailwind CSS.