Composant de comparaison de produits
Un composant de comparaison de produits simple et réactif avec un design glassmorphism, une palette de couleurs de terre et une prise en charge du mode sombre. Il affiche deux fiches produits côte à côte sur des écrans plus grands et empilées sur des écrans plus petits.
HTML Code
<div class="container mx-auto p-4">
<div class="flex flex-col lg:flex-row gap-4">
<!-- Product 1 -->
<div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product A</h2>
<img src="https://picsum.photos/seed/product1/4
00/300" alt="Product A" class="rounded-md mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
</div>
<!-- Product 2 -->
<div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product B</h2>
<img src="https://picsum.photos/seed/product2/400/300" alt="Product B" class="rounded-md mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
</div>
</div>
</div>Composants associés
Composant de comparaison de produits Neumorphism
Un composant de comparaison de produits simple et réactif dans le style Neumorphism avec des tons de terre, la prise en charge du thème sombre et pas de JavaScript.
RetroVintageComparaison de produits
Composant de comparaison de produits rétro/vintage pour tableau de bord. Conception monochromatique simple avec prise en charge du mode sombre. Utilise Tailwind CSS.
Composant de comparaison de produits
Un composant simple de comparaison de produits conçu pour l’interface utilisateur en mode sombre à l’aide d’un jeu de couleurs en niveaux de gris. Il présente une mise en page de base avec un minimum d’éléments, idéale pour le contenu du blog et la lecture.