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
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 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
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.