Composant de comparaison de produits
Un composant de comparaison de produits simple et réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Affiche les noms des produits, les fonctionnalités et les prix à des fins de comparaison.
HTML Code
<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-8">Product Comparison</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Product 1 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-4">Product Alpha</h3>
<ul class="text-gray-400 mb-6">
<li class="mb-2">Feature A</li>
<li class="mb-2">Feature B</li>
<li class="mb-2">Feature C</li>
<li>Feature D</li>
</ul>
<div class="text-2xl font-bold text-center">$49/m</div>
</div>
<!-- Product 2 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-4">Product Beta</h3>
<ul class="text-gray-400 mb-6">
<li class="mb-2">Feature A</li>
<li class="mb-2">Feature B</li>
<li class="mb-2">Feature C</li>
<li>Feature D</li>
<li>Feature E</li>
</ul>
<div class="text-2xl font-bold text-center">$79/m</div>
</div>
<!-- Product 3 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg">
<h3 class="text-xl font-semibold mb-4">Product Gamma</h3>
<ul class="text-gray-400 mb-6">
<li class="mb-2">Feature A</li>
<li class="mb-2">Feature B</li>
<li class="mb-2">Feature C</li>
<li>Feature D</li>
<li>Feature E</li>
<li>Feature F</li>
</ul>
<div class="text-2xl font-bold text-center">$99/m</div>
</div>
</div>
</div>
</div>Composants associés
Composant de comparaison de produits
Un composant simple et réactif de comparaison de produits avec une esthétique Memphis Design, utilisant une palette de couleurs rétro/vintage. Conçu pour les outils CRM/Business, il prend en charge le mode sombre et affiche les principales fonctionnalités de deux produits.
Composant de comparaison de produits
Un composant simple et ludique de comparaison de produits conçu avec des couleurs d’automne, adapté à la documentation ou aux sites wiki. Dispose d’éléments arrondis, d’une réactivité totale et d’une prise en charge du mode sombre.
Composant de comparaison de produits
Composant de comparaison de produits avec un design minimaliste/plat, une palette de couleurs de tons de terre et une complexité modérée pour le tableau de bord à l’aide de Tailwind CSS. Le composant est réactif et prend en charge le thème sombre. Pas de JavaScript.