Product Comparison Component
A complex product comparison component designed with Material Design principles, featuring a vibrant color scheme and support for dark mode. Ideal for social media networking interfaces.
HTML Code
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-white dark:bg-gray-800">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
<img src="https://picsum.photos/400/200?random=1" alt="Product 1" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 1</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 1 with vibrant highlights.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
<span class="ml-2 text-gray-700 dark:text-gray-300">@user1</span>
</div>
<button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
<img src="https://picsum.photos/400/200?random=2" alt="Product 2" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 2</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 2 with vibrant highlights.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
<span class="ml-2 text-gray-700 dark:text-gray-300">@user2</span>
</div>
<button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-all hover:shadow-2xl">
<img src="https://picsum.photos/400/200?random=3" alt="Product 3" class="w-full h-32 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Product 3</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Description of Product 3 with vibrant highlights.</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md">
<span class="ml-2 text-gray-700 dark:text-gray-300">@user3</span>
</div>
<button class="mt-3 w-full bg-blue-500 dark:bg-blue-700 text-white py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition-all">Compare</button>
</div>
</div>
</div>Related Components
Product Comparison Component
A simple product comparison component designed for dark mode UI using a grayscale color scheme. It features a basic layout with minimal elements, ideal for blog content and reading purposes.
Brutalist Product Comparison
Brutalist Product Comparison Component for Social Media with Monochromatic color scheme and dark mode support
Product Comparison Component
Product Comparison Component with Minimalist/Flat Design, Earth tones color scheme, and Moderate complexity for Dashboard purpose using Tailwind CSS. The component is responsive and supports dark theme. No JavaScript.