Product Comparison Component
A product comparison component with Skeuomorphism design style, Pastel color scheme, and Moderate complexity level, designed for dashboards. It includes responsive design and dark theme support using Tailwind CSS.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Comparison</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'selector',
theme: {
extend: {
colors: {
pastelPink: '#FFD1DC',
pastelBlue: '#AEC6CF',
pastelGreen: '#77DD77',
pastelYellow: '#FDFD96',
pastelPurple: '#B39EB5',
darkBackground: '#2D3748',
darkCard: '#4A5568',
darkText: '#E2E8F0'
},
boxShadow: {
skeuo: '9px 9px 18px #a7a7a7, -9px -9px 18px #ffffff',
skeuoDark: '9px 9px 18px #222B36, -9px -9px 18px #384350'
}
}
}
}
</script>
</head>
<body class="bg-gray-200 dark:bg-darkBackground p-8">
<div class="max-w-6xl mx-auto bg-white dark:bg-darkCard rounded-xl shadow-skeuo dark:shadow-skeuoDark p-8">
<h1 class="text-3xl font-bold mb-8 text-gray-800 dark:text-darkText text-center">Product Comparison</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Product 1 -->
<div class="bg-pastelPink dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Alpha</h2>
<img src="https://picsum.photos/300/200?random=1" alt="Product Alpha" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature B</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-red-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg> Feature C</li>
</ul>
<div class="mt-6 text-center">
<button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
View Details
</button>
</div>
</div>
<!-- Product 2 -->
<div class="bg-pastelBlue dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Beta</h2>
<img src="https://picsum.photos/300/200?random=2" alt="Product Beta" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature D</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature E</li>
</ul>
<div class="mt-6 text-center">
<button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
View Details
</button>
</div>
</div>
<!-- Product 3 -->
<div class="bg-pastelGreen dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Gamma</h2>
<img src="https://picsum.photos/300/200?random=3" alt="Product Gamma" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature F</li>
<li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature G</li>
</ul>
<div class="mt-6 text-center">
<button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
View Details
</button>
</div>
</div>
</div>
</div>
</body>
</html>Related Components
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.
Product Comparison Component
A responsive product comparison component with 3D-like design elements, dark theme support, and integration of placeholder images for product visualization and user avatars using picsum.photos and randomuser.me.
Product Comparison Component
A skeuomorphic product comparison component designed with Tailwind CSS featuring responsive effects and dark theme support.