Rechercher des composants

Catégories

Composants Comparaison des produits

Comparaison des produits

Outil de comparaison de plusieurs produits

Composant de comparaison de produits

Un composant simple de comparaison de produits conçu pour l’interface utilisateur en mode sombre à l’aide d’un jeu de couleurs en niveaux de gris. Il présente une mise en page de base avec un minimum d’éléments, idéale pour le contenu du blog et la lecture.

Ouvrir Aperçu

                <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-2xl mx-auto">
    <h2 class="text-xl font-bold mb-4">Product Comparison</h2>
    <table class="min-w-full">
        <thead>
            <tr class="bg-gray-700">
                <th class="px-4 py-2">Feature</th>
                <th class="px-4 py-2">Product A</th>
                <th class="px-4 py-2">Product B</th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-b border-gray-600">
                <td class="px-4 py-2">Price</td>
                <td class="px-4 py-2">$199</td>
                <td class="px-4 py-2">$249</td>
            </tr>
            <tr class="border-b border-gray-600">
                <td class="px-4 py-2">Rating</td>
                <td class="px-4 py-2">⭐⭐⭐⭐</td>
                <td class="px-4 py-2">⭐⭐⭐⭐⭐</td>
            </tr>
            <tr class="border-b border-gray-600">
                <td class="px-4 py-2">Warranty</td>
                <td class="px-4 py-2">1 Year</td>
                <td class="px-4 py-2">2 Years</td>
            </tr>
            <tr class="border-b border-gray-600">
                <td class="px-4 py-2">Image</td>
                <td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=1" alt="Product A" class="rounded" /></td>
                <td class="px-4 py-2"><img src="https://picsum.photos/100/100?random=2" alt="Product B" class="rounded" /></td>
            </tr>
        </tbody>
    </table>
    <div class="flex justify-between mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full" />
            <span class="ml-2">Reviewed by John Doe</span>
        </div>
        <a href="#" class="text-blue-400 hover:underline">Read More</a>
    </div>
</div>

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

Ouvrir Aperçu

                <div class="bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white p-4">
  <h2 class="text-2xl font-bold mb-4 border-b-2 border-zinc-900 dark:border-white pb-2">Compare Products</h2>
  <div class="grid grid-cols-2 gap-4">
    <div class="border-2 border-zinc-900 dark:border-white p-4">
      <h3 class="text-xl font-semibold mb-2">Product A</h3>
      <img src="https://picsum.photos/seed/producta/200/150" alt="Product A" class="mb-2 w-full h-auto">
      <ul class="list-disc list-inside">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
    </div>
    <div class="border-2 border-zinc-900 dark:border-white p-4">
      <h3 class="text-xl font-semibold mb-2">Product B</h3>
      <img src="https://picsum.photos/seed/productb/200/150" alt="Product B" class="mb-2 w-full h-auto">
      <ul class="list-disc list-inside">
        <li>Feature X</li>
        <li>Feature Y</li>
        <li>Feature Z</li>
      </ul>
    </div>
  </div>
</div>

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.

Ouvrir Aperçu

                <div class="container mx-auto p-4">
  <div class="flex flex-col lg:flex-row gap-4">
    
    <!-- Product 1 -->
    <div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
      <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product A</h2>
      <img src="https://picsum.photos/seed/product1/4
00/300" alt="Product A" class="rounded-md mb-4">
      <p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
    </div>

    <!-- Product 2 -->
    <div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
      <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product B</h2>
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product B" class="rounded-md mb-4">
      <p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
        <li>Feature A</li>
        <li>Feature B</li>
        <li>Feature C</li>
      </ul>
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
    </div>

  </div>
</div>

Composant de comparaison de produits

Un composant réactif de comparaison de produits avec des éléments de conception de type 3D, la prise en charge du thème sombre et l’intégration d’images de remplacement pour la visualisation des produits et les avatars des utilisateurs à l’aide de picsum.photos et randomuser.me.

Ouvrir Aperçu

                <div class="container mx-auto px-4 py-8">
  <div class="dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="flex flex-col md:flex-row">
      <!-- Product 1 -->
      <div class="flex-1 p-6 dark:border-gray-700 border-b md:border-b-0 md:border-r relative">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 opacity-20"></div>
        <div class="relative z-10">
          <h3 class="text-xl font-semibold mb-4 dark:text-white text-gray-800">Product A</h3>
          <img src="https://picsum.photos/seed/producta/400/300" alt="Product A" class="mx-auto mb-6 rounded-md shadow-md">
          <ul class="text-sm dark:text-gray-300 text-gray-700 space-y-2">
            <li>Feature 1</li>
            <li>Feature 2</li>
            <li>Feature 3</li>
          </ul>
          <div class="mt-6 text-center">
            <button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition duration-300">Learn More</button>
          </div>
        </div>
      </div>

      <!-- Product 2 -->
      <div class="flex-1 p-6 relative">
         <div class="absolute inset-0 bg-gradient-to-br from-green-500 to-teal-600 opacity-20"></div>
        <div class="relative z-10">
          <h3 class="text-xl font-semibold mb-4 dark:text-white text-gray-800">Product B</h3>
          <img src="https://picsum.photos/seed/productb/400/300" alt="Product B" class="mx-auto mb-6 rounded-md shadow-md">
          <ul class="text-sm dark:text-gray-300 text-gray-700 space-y-2">
            <li>Feature A</li>
            <li>Feature B</li>
            <li>Feature C</li>
          </ul>
           <div class="mt-6 text-center">
            <button class="bg-green-600 text-white px-6 py-2 rounded-full hover:bg-green-700 transition duration-300">Learn More</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Comparison Table (Optional addition for more detail) -->
     <div class="p-6 dark:bg-gray-700 bg-gray-100">
      <h4 class="text-lg font-semibold mb-4 dark:text-white text-gray-800">Detailed Comparison</h4>
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
        <thead>
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
          </tr>
        </thead>
        <tbody class="dark:bg-gray-800 bg-white divide-y divide-gray-200 dark:divide-gray-600">
          <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 1/A</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Maybe</td>
          </tr>
          <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 2/B</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Some</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
          </tr>
           <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white text-gray-900">Feature 3/C</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">No</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm dark:text-gray-300 text-gray-700">Yes</td>
          </tr>
        </tbody>
      </table>
    </div>

     <!-- Avatars section -->
    <div class="p-6 flex justify-around items-center dark:bg-gray-700 bg-gray-100">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar 1" class="w-12 h-12 rounded-full shadow-md">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar 2" class="w-12 h-12 rounded-full shadow-md">
         <img src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar 3" class="w-12 h-12 rounded-full shadow-md">
    </div>

  </div>
</div>

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.

Ouvrir Aperçu

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

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.

Ouvrir Aperçu

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

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.

Ouvrir Aperçu

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