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.
HTML Code
<div class="bg-white dark:bg-gray-900 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-gray-600 dark:text-gray-300 font-semibold tracking-wide uppercase">Compare</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Product Comparison</p>
</div>
<div class="mt-10">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Product 1 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product A</h3>
<p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-5">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/producta/600/400" alt="Product A">
</div>
<ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<div class="mt-6">
<button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product B</h3>
<p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-5">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/productb/600/400" alt="Product B">
</div>
<ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<div class="mt-6">
<button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="pt-6">
<div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
<div class="-mt-6">
<div>
<span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</span>
</div>
<h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product C</h3>
<p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="mt-5">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/productc/600/400" alt="Product C">
</div>
<ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
<li>Feature X</li>
<li>Feature Y</li>
<li>Feature Z</li>
</ul>
<div class="mt-6">
<button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 lg:grid lg:grid-cols-3 lg:gap-8">
<div class="sm:col-span-3">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Comparison Table</h3>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:p-0">
<dl class="sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 1 / Feature A / Feature X</dt>
<dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 2 / Feature B / Feature Y</dt>
<dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
</div>
<div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 3 / Feature C / Feature Z</dt>
<dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>Composants associés
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
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.
Composant de comparaison de produits - Cyberpunk Retro Charity
Un composant simple et réactif de comparaison de produits conçu avec une esthétique cyberpunk utilisant une palette de couleurs rétro/vintage, destiné aux organisations à but non lucratif/caritatives. Dispose d’une prise en charge du mode sombre et d’une mise en page propre et minimaliste.