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.
HTML Code
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 transition duration-500 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full" src="https://picsum.photos/seed/pic1/100/100" alt="Product 1 Image" />
<div class="ml-4">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product 1</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Product 1. It's a great product for your needs.</p>
</div>
</div>
<div class="flex justify-between items-center mt-4">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">$29.99</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 transition duration-500 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full" src="https://picsum.photos/seed/pic2/100/100" alt="Product 2 Image" />
<div class="ml-4">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product 2</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Product 2. This product serves your unique demands.</p>
</div>
</div>
<div class="flex justify-between items-center mt-4">
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">$39.99</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #cbd5e0;
}
}
</style>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 - 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.
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.