Компонент сравнения продуктов
Скевоморфный компонент сравнения товаров, разработанный с помощью Tailwind CSS с адаптивными эффектами и поддержкой темных тем.
HTML-код
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<div class="w-full md:w-1/2 p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product A</h2>
<img src="https://picsum.photos/300/200?random=1" alt="Product A" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
<p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ex non quam cursus vestibulum.</p>
<div class="mt-4">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 1</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 2</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 3</span>
</div>
</div>
<div class="w-full md:w-1/2 p-6 border-l border-gray-300 dark:border-gray-700">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product B</h2>
<img src="https://picsum.photos/300/200?random=2" alt="Product B" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
<p class="text-gray-600 dark:text-gray-400 mt-2">Suspendisse tincidunt, nunc id congue euismod, arcu enim cursus diam, in imperdiet urna risus quis eros.</p>
<div class="mt-4">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature A</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature B</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature C</span>
</div>
</div>
</div>Связанные компоненты
Компонент сравнения продуктов - Моноширинный/Стиль Разработчика
Сложный, отзывчивый компонент сравнения продуктов, разработанный в соответствии с эстетикой монопространства/разработчика, выполненный в фиолетово-фиолетовой цветовой гамме. Он идеально подходит для занятий спортом и фитнесом, поддерживает темный режим и имеет лаконичный внешний вид, вдохновленный терминалом, с несколькими точками сравнения.
Компонент сравнения продуктов
Отзывчивый компонент сравнения товаров с теплыми нейтральными цветами и тонкими неоново-светящимися эффектами, разработанный для образовательных платформ. Включает поддержку темного режима и семантический HTML.
Компонент сравнения продуктов
Сложный, отзывчивый компонент сравнения продуктов с дизайном, вдохновленным органикой/природой, дополнительной цветовой схемой, поддержкой темного режима и специально предназначенный для приложений для спорта и фитнеса. Отличается плавными линиями и естественными формами.