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