Компонент сравнения продуктов
Простой, отзывчивый компонент сравнения товаров с дизайном стекломорфизма, цветовой схемой земляных тонов и поддержкой темного режима. Он отображает две карточки товаров рядом друг с другом на больших экранах и складывается на меньшие экраны.
HTML-код
<div class="container mx-auto p-4">
<div class="flex flex-col lg:flex-row gap-4">
<!-- Product 1 -->
<div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product A</h2>
<img src="https://picsum.photos/seed/product1/4
00/300" alt="Product A" class="rounded-md mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
</div>
<!-- Product 2 -->
<div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product B</h2>
<img src="https://picsum.photos/seed/product2/400/300" alt="Product B" class="rounded-md mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
</div>
</div>
</div>Связанные компоненты
Компонент сравнения продуктов
Адаптивный компонент сравнения товаров с 3D-подобными элементами дизайна, поддержкой темных тем и интеграцией изображений-заполнителей для визуализации товаров и аватаров пользователей с помощью picsum.photos и randomuser.me.
Компонент сравнения продуктов
Компонент сравнения товаров со стилем оформления Скевоморфизм, Пастельной цветовой гаммой и Умеренным уровнем сложности, предназначенный для дашбордов. Он включает в себя адаптивный дизайн и поддержку темной темы с использованием Tailwind CSS.
Компонент сравнения товаров - ретро фирменный стиль
Отзывчивый компонент сравнения продуктов с ретро/винтажной корпоративной эстетикой с использованием монохроматической синей цветовой гаммы. Имеет несколько интерактивных элементов и поддержку темного режима. Дизайн включает в себя карточки в стиле ретро с геометрическими узорами в стиле 80-х/90-х годов, олдскульной типографикой и пиксельными акцентами. Идеально подходит для бизнес-сайтов, которые хотят выделиться ностальгическим дизайном, сохраняя при этом профессионализм.