Composants Comparaison des produits Composant de comparaison de produits

Composant de comparaison de produits

Un composant de comparaison de produits avec un style de design brutaliste, avec des couleurs vives et une complexité modérée pour présenter des produits ou travailler dans un portefeuille.

Aperçu

HTML Code

<div class="bg-gray-900 dark:bg-gray-800 text-white p-5 rounded-lg shadow-lg">
  <h1 class="text-3xl font-bold text-violet-500">Product Comparison</h1>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mt-5">
    <div class="bg-red-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=1" alt="Product 1" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product One</h2>
      <p class="mt-2">Description of Product One. This product is amazing!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$99</span>
        <button class="bg-white text-red-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
    <div class="bg-green-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=2" alt="Product 2" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product Two</h2>
      <p class="mt-2">Description of Product Two. A fantastic choice!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$149</span>
        <button class="bg-white text-green-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
    <div class="bg-blue-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=3" alt="Product 3" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product Three</h2>
      <p class="mt-2">Description of Product Three. Best-selling product!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$199</span>
        <button class="bg-white text-blue-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
  </div>
  <div class="mt-8">
    <h1 class="text-2xl font-bold text-violet-500">User Reviews</h1>
    <div class="flex flex-col space-y-4 mt-3">
      <div class="flex bg-gray-700 dark:bg-gray-600 p-3 rounded-lg">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <p class="font-semibold">John Doe</p>
          <p class="text-gray-300 dark:text-gray-200">"Loved this product, it changed my life!"</p>
        </div>
      </div>
      <div class="flex bg-gray-700 dark:bg-gray-600 p-3 rounded-lg">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <p class="font-semibold">Jane Smith</p>
          <p class="text-gray-300 dark:text-gray-200">"I wasn't sure at first, but now I can't live without it!"</p>
        </div>
      </div>
    </div>
  </div>
</div>

Composants associés

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.

Ouvrir

EarthyComparaison des produits

Un composant réactif de comparaison de produits pour le commerce électronique, avec trois fiches produits. Stylisé avec Tailwind CSS en utilisant une palette de couleurs de terre (bruns, verts, ambres) et des éléments de conception 3D simples comme des ombres et des barres d’accentuation pour plus de profondeur et d’engagement. Inclut la prise en charge du mode sombre et utilise des images de remplacement de picsum.photos.

Ouvrir

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.

Ouvrir