Компоненты Сравнение продуктов Компонент сравнения продуктов

Компонент сравнения продуктов

Адаптивный компонент сравнения товаров, стилизованный в стиле ретро/винтаж 80-х/90-х годов, с поддержкой темных тем с помощью Tailwind CSS.

Предварительный просмотр

HTML-код

<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>

Связанные компоненты

Компонент сравнения продуктов

Игривый и дружелюбный компонент сравнения товаров для спорта и фитнеса, отличающийся теплыми нейтральными тонами, закругленными элементами и адаптивным дизайном с поддержкой темного режима.

Открытый

Компонент сравнения продуктов - Нейроморфизм Монохроматический

Адаптивный компонент сравнения продуктов с неоморфным стилем дизайна и монохроматической цветовой схемой, подходящий для веб-сайтов мероприятий/конференций. Включает поддержку темного режима.

Открытый

Компонент сравнения товаров - ретро фирменный стиль

Отзывчивый компонент сравнения продуктов с ретро/винтажной корпоративной эстетикой с использованием монохроматической синей цветовой гаммы. Имеет несколько интерактивных элементов и поддержку темного режима. Дизайн включает в себя карточки в стиле ретро с геометрическими узорами в стиле 80-х/90-х годов, олдскульной типографикой и пиксельными акцентами. Идеально подходит для бизнес-сайтов, которые хотят выделиться ностальгическим дизайном, сохраняя при этом профессионализм.

Открытый