Components Product Comparison Product Comparison Component

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.

Preview

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

A luxury/premium product comparison component for photography gear, featuring elegant design, sophisticated typography, and a high-contrast color scheme. Includes responsive layout and dark mode support.

Open

Product Comparison Component

A simple, responsive product comparison component with dark mode support using Tailwind CSS. Displays product names, features, and pricing for comparison.

Open

Product Comparison Component

A responsive product comparison component with dark theme support, featuring a minimalist/flat design and a pastel color scheme. This complex component is suitable for dashboards, allowing users to compare multiple products with detailed specifications and interactive elements.

Open