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.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-4xl mx-auto">
<h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200 text-center">Product Comparison</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Product 1" />
<h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of Product 1 goes here.</p>
<div class="flex items-center mt-2">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
<img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=2" alt="Product 2" />
<h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of Product 2 goes here.</p>
<div class="flex items-center mt-2">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
</div>
</div>
</div>
</div>Composants associés
Composant de comparaison de produits - Crypto
Un composant de comparaison de produits réactif avec un design luxueux/haut de gamme, une palette de couleurs bonbon/doux, adapté aux applications de crypto-monnaie/blockchain. Dispose d’une prise en charge du mode sombre, d’une typographie élégante et de données de repère de position.
Composant de comparaison de produits
Un composant de comparaison de produits ludique et convivial pour les produits de sport/fitness, avec des neutres chauds, des éléments arrondis et un design réactif avec prise en charge du mode sombre.
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.