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 - 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.
Componente de comparación de productos: estilo monoespaciado/desarrollador
Un componente de comparación de productos complejo y receptivo diseñado con una estética monoespaciada/reveladora, con un esquema de color púrpura/violeta. Ideal para aplicaciones deportivas y de fitness, cuenta con soporte para modo oscuro y un aspecto limpio inspirado en el terminal con múltiples puntos de comparación.
Componente de comparación de productos
Un componente de comparación de productos responsivo diseñado con Material Design usando Tailwind CSS, con diseños basados en cuadrículas, sombras y soporte para temas oscuros.