Компонент сравнения продуктов
Игривый и веселый компонент сравнения товаров с округлыми элементами и дополнительной цветовой гаммой, подходящий для приборной панели. Особенности адаптивного дизайна и поддержки темного режима.
HTML-код
<div class="bg-white p-4 sm:p-6 lg:p-8 rounded-2xl shadow-xl max-w-4xl mx-auto my-8 dark:bg-gray-800 transition-colors duration-300">
<h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-6 text-green-600 dark:text-green-400">Compare Our Fun Features!</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Product 1 Card -->
<div class="bg-blue-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-blue-900/40">
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/100/100?random=1" alt="Product 1" class="rounded-full border-4 border-blue-400 dark:border-blue-600 shadow-lg">
</div>
<h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-blue-800 dark:text-blue-300">Product Alpha 🎉</h3>
<ul class="list-none space-y-3 text-lg text-blue-700 dark:text-blue-200">
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Super Speedy Performance</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Unlimited Whimsical Widgets</li>
<li class="flex items-center"><span class="text-red-500 mr-2">✗</span> No Unicorn Mode</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Friendly Support Sprites</li>
</ul>
<div class="text-center mt-6">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-800">
Choose Alpha!
</button>
</div>
</div>
<!-- Product 2 Card -->
<div class="bg-orange-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-orange-900/40">
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/100/100?random=2" alt="Product 2" class="rounded-full border-4 border-orange-400 dark:border-orange-600 shadow-lg">
</div>
<h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-orange-800 dark:text-orange-300">Product Beta 🌟</h3>
<ul class="list-none space-y-3 text-lg text-orange-700 dark:text-orange-200">
<li class="flex items-center"><span class="text-red-500 mr-2">✗</span> Standard Speed</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Dazzling Gimmicks Included</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Exclusive Unicorn Mode</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span> Mythical Support Beings</li>
</ul>
<div class="text-center mt-6">
<button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-orange-800">
Select Beta!
</button>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент сравнения продуктов
Адаптивный компонент сравнения товаров, стилизованный в стиле ретро/винтаж 80-х/90-х годов, с поддержкой темных тем с помощью Tailwind CSS.
Компонент сравнения продуктов
Адаптивный компонент сравнения товаров с 3D-подобными элементами дизайна, поддержкой темных тем и интеграцией изображений-заполнителей для визуализации товаров и аватаров пользователей с помощью picsum.photos и randomuser.me.
Компонент сравнения продуктов
Простой, отзывчивый компонент сравнения товаров с эстетикой Memphis Design с использованием цветовой палитры ретро/винтаж. Разработанный для CRM/Business Tools, он поддерживает темный режим и отображает ключевые функции для двух продуктов.