Composant de comparaison de produits
Un composant de comparaison de produits skeuomorphe conçu avec Tailwind CSS avec des effets réactifs et la prise en charge des thèmes sombres.
HTML Code
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<div class="w-full md:w-1/2 p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product A</h2>
<img src="https://picsum.photos/300/200?random=1" alt="Product A" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
<p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ex non quam cursus vestibulum.</p>
<div class="mt-4">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 1</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 2</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature 3</span>
</div>
</div>
<div class="w-full md:w-1/2 p-6 border-l border-gray-300 dark:border-gray-700">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Product B</h2>
<img src="https://picsum.photos/300/200?random=2" alt="Product B" class="w-full h-48 object-cover mt-4 rounded-lg shadow-md">
<p class="text-gray-600 dark:text-gray-400 mt-2">Suspendisse tincidunt, nunc id congue euismod, arcu enim cursus diam, in imperdiet urna risus quis eros.</p>
<div class="mt-4">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature A</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature B</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-1 rounded-full text-sm">Feature C</span>
</div>
</div>
</div>Composants associés
Comparaison des produits brutalistes
Composant de comparaison de produits brutaliste pour les médias sociaux avec schéma de couleurs monochromatiques et prise en charge du mode sombre
Composant de comparaison de produits
Un composant de comparaison de produits réactif dans une esthétique rétro/vintage des années 80/90, avec prise en charge du thème sombre avec Tailwind CSS.
Composant de comparaison de produits - Monospace/Developer Style
Un composant complexe et réactif de comparaison de produits conçu avec une esthétique monospace/développeur, arborant une palette de couleurs violet/violet. Idéal pour les applications de sport et de fitness, il prend en charge le mode sombre et un look épuré, inspiré des terminaux, avec plusieurs points de comparaison.