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
Design minimaliste / plat, palette de couleurs en niveaux de gris, composant complexe de comparaison de produits pour les médias sociaux avec un design réactif et prise en charge du thème sombre.
Composant de comparaison de produits
Un composant réactif de comparaison de produits avec des éléments de conception de type 3D, la prise en charge du thème sombre et l’intégration d’images de remplacement pour la visualisation des produits et les avatars des utilisateurs à l’aide de picsum.photos et randomuser.me.
Composant de comparaison de produits
Un composant réactif de comparaison de produits conçu avec Material Design à l’aide de Tailwind CSS, avec des mises en page basées sur des grilles, des ombres et la prise en charge des thèmes sombres.