Composant de comparaison de produits
Un composant de comparaison de produits ludique et joyeux avec des éléments arrondis et une palette de couleurs complémentaires, adapté à un tableau de bord. Dispose d’un design réactif et d’une prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant de comparaison de produits - Couleurs d’automne inspirées de la nature et biologiques
Un composant complexe et réactif de comparaison de produits avec un design d’inspiration bio/nature, utilisant des couleurs d’automne. Convient aux applications de sport et de fitness, avec prise en charge complète du mode sombre.
Composant de comparaison de produits
Un composant de comparaison de produits complexe et réactif avec des éléments de conception 3D, une palette de couleurs triadique et la prise en charge du mode sombre, adapté au contexte d’un tableau de bord.
Composant de comparaison de produits - Monospace/Developer Style
Un composant complexe et réactif de comparaison de produits conçu avec une esthétique monospace/développeur, arborant une palette de couleurs violet/violet. Idéal pour les applications de sport et de fitness, il prend en charge le mode sombre et un look épuré, inspiré des terminaux, avec plusieurs points de comparaison.