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.
HTML Code
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 transition duration-500 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full" src="https://picsum.photos/seed/pic1/100/100" alt="Product 1 Image" />
<div class="ml-4">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product 1</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Product 1. It's a great product for your needs.</p>
</div>
</div>
<div class="flex justify-between items-center mt-4">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">$29.99</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 transition duration-500 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full" src="https://picsum.photos/seed/pic2/100/100" alt="Product 2 Image" />
<div class="ml-4">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product 2</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Product 2. This product serves your unique demands.</p>
</div>
</div>
<div class="flex justify-between items-center mt-4">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">$39.99</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #cbd5e0;
}
}
</style>Related Components
Product Comparison Component - Watercolor/Artistic
A complex, monochromatic product comparison component designed for industrial/manufacturing use, featuring a soft, watercolor/artistic aesthetic with dark mode support. Allows users to compare multiple products side-by-side.
EarthyProductComparison
A responsive product comparison component for e-commerce, featuring three product cards. Styled with Tailwind CSS using an earth tone color scheme (browns, greens, ambers) and simple 3D design elements like shadows and accent bars for depth and engagement. Includes dark mode support and uses placeholder images from picsum.photos.
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.