Componente de comparación de productos
Un componente de comparación de productos lúdico y alegre con elementos redondeados y una combinación de colores complementaria, adecuada para un tablero. Cuenta con diseño responsivo y soporte para modo oscuro.
Código 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>Componentes relacionados
Componente de comparación de productos
Un componente de comparación de productos complejo y receptivo con un diseño orgánico/inspirado en la naturaleza, combinación de colores complementaria, compatibilidad con modo oscuro y diseñado para aplicaciones deportivas/fitness. Presenta líneas fluidas y formas naturales.
Componente de comparación de productos
Un componente de comparación de productos responsivo con soporte para temas oscuros, con un diseño minimalista/plano y una combinación de colores pastel. Este componente complejo es adecuado para tableros, lo que permite a los usuarios comparar múltiples productos con especificaciones detalladas y elementos interactivos.
Componente de comparación de productos - Cyberpunk Retro Charity
Un componente de comparación de productos simple y receptivo diseñado con una estética cyberpunk utilizando una paleta de colores retro / vintage, destinado a organizaciones sin fines de lucro / benéficas. Cuenta con soporte para el modo oscuro y un diseño limpio y minimalista.