Компонент сравнения продуктов
Адаптивный компонент сравнения товаров, стилизованный под Material Design с использованием Tailwind CSS, с макетами на основе сетки, тенями и поддержкой темных тем.
HTML-код
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-4xl mx-auto">
<h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200 text-center">Product Comparison</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Product 1" />
<h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of Product 1 goes here.</p>
<div class="flex items-center mt-2">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=2" alt="Product 2" />
<h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of Product 2 goes here.</p>
<div class="flex items-center mt-2">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент сравнения продуктов
Адаптивный компонент сравнения товаров, стилизованный в стиле ретро/винтаж 80-х/90-х годов, с поддержкой темных тем с помощью Tailwind CSS.
Компонент сравнения продуктов
Отзывчивый компонент сравнения товаров с поддержкой темной темы, отличающийся минималистичным/плоским дизайном и пастельной цветовой гаммой. Этот сложный компонент подходит для информационных панелей, позволяя пользователям сравнивать несколько продуктов с подробными спецификациями и интерактивными элементами.
Компонент сравнения продуктов
Простой, отзывчивый компонент сравнения товаров с поддержкой темного режима с использованием Tailwind CSS. Отображает названия продуктов, функции и цены для сравнения.