Composants Comparaison des produits Composant de comparaison de produits

Composant de comparaison de produits

Un composant de comparaison de produits de luxe/haut de gamme pour le matériel de photographie, doté d’un design élégant, d’une typographie sophistiquée et d’une palette de couleurs très contrastée. Comprend une mise en page réactive et la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="font-sans antialiased text-gray-800 bg-white dark:bg-gray-900 dark:text-gray-200 min-h-screen p-4 sm:p-8 lg:p-12">

  <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-10 sm:mb-12 lg:mb-16 tracking-tight text-gray-900 dark:text-gray-50">
    Compare <span class="text-fuchsia-600 dark:text-fuchsia-500">Photography</span> Gear
  </h2>

  <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 lg:gap-8">

    <!-- Product Card 1 -->
    <div class="flex flex-col bg-gray-50 dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-100 dark:border-gray-800">
      <div class="p-6 sm:p-8 flex-grow">
        <div class="text-sm font-semibold tracking-wide uppercase text-fuchsia-600 dark:text-fuchsia-500 mb-2">Advanced</div>
        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-50">Pro DSLR Camera X</h3>
        <img src="https://picsum.photos/400/250?random=1" alt="Pro DSLR Camera X" class="w-full h-48 object-cover rounded-xl mb-6 shadow-md border border-gray-200 dark:border-gray-700">
        <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
          Unrivaled image quality and blazing-fast performance for professional photographers. Durable build, ready for any challenge.
        </p>

        <ul class="space-y-3 mb-6 text-gray-700 dark:text-gray-300">
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>45.7MP Full-Frame Sensor</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>10 FPS Continuous Shooting</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>4K UHD Video at 60p</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>Weather Sealed Body</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pb-6 sm:px-8 sm:pb-8 pt-0">
        <p class="text-4xl font-extrabold text-gray-900 dark:text-gray-50 mb-6">$3,499</p>
        <button class="w-full px-6 py-3 rounded-xl font-bold text-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white dark:bg-fuchsia-500 dark:hover:bg-fuchsia-600 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700 tracking-wide shadow-lg hover:shadow-xl">
          Learn More
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="flex flex-col bg-gray-50 dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-100 dark:border-gray-800">
      <div class="p-6 sm:p-8 flex-grow">
        <div class="text-sm font-semibold tracking-wide uppercase text-purple-600 dark:text-purple-500 mb-2">Prosumer</div>
        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-50">Mirrorless Camera Y</h3>
        <img src="https://picsum.photos/400/250?random=2" alt="Mirrorless Camera Y" class="w-full h-48 object-cover rounded-xl mb-6 shadow-md border border-gray-200 dark:border-gray-700">
        <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
          Compact powerhouse with incredible low-light performance and advanced video capabilities. Perfect for hybrid shooters.
        </p>
        <ul class="space-y-3 mb-6 text-gray-700 dark:text-gray-300">
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>33MP Full-Frame Sensor</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>759-Point AF System</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>4K 120p Video Recording</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>In-Body Image Stabilization</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pb-6 sm:px-8 sm:pb-8 pt-0">
        <p class="text-4xl font-extrabold text-gray-900 dark:text-gray-50 mb-6">$2,199</p>
        <button class="w-full px-6 py-3 rounded-xl font-bold text-lg bg-purple-600 hover:bg-purple-700 text-white dark:bg-purple-500 dark:hover:bg-purple-600 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 tracking-wide shadow-lg hover:shadow-xl">
          Learn More
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="flex flex-col bg-gray-50 dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-100 dark:border-gray-800">
      <div class="p-6 sm:p-8 flex-grow">
        <div class="text-sm font-semibold tracking-wide uppercase text-teal-600 dark:text-teal-500 mb-2">Entry-Level Pro</div>
        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-50">Compact Camera Z</h3>
        <img src="https://picsum.photos/400/250?random=3" alt="Compact Camera Z" class="w-full h-48 object-cover rounded-xl mb-6 shadow-md border border-gray-200 dark:border-gray-700">
        <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
          Pocketable, powerful, and perfect for travel and street photography. Don't let its size fool you.
        </p>
        <ul class="space-y-3 mb-6 text-gray-700 dark:text-gray-300">
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>24.2MP APS-C Sensor</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>Fast Hybrid AF</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>3.0-inch Tilt LCD</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-emerald-500 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>Optical Viewfinder</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pb-6 sm:px-8 sm:pb-8 pt-0">
        <p class="text-4xl font-extrabold text-gray-900 dark:text-gray-50 mb-6">$1,299</p>
        <button class="w-full px-6 py-3 rounded-xl font-bold text-lg bg-teal-600 hover:bg-teal-700 text-white dark:bg-teal-500 dark:hover:bg-teal-600 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-700 tracking-wide shadow-lg hover:shadow-xl">
          Learn More
        </button>
      </div>
    </div>

    <!-- Product Card 4 - New Product Placeholder -->
    <div class="flex flex-col bg-gray-50 dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-100 dark:border-gray-800">
      <div class="p-6 sm:p-8 flex-grow flex flex-col justify-center items-center text-center">
        <div class="text-sm font-semibold tracking-wide uppercase text-gray-500 dark:text-gray-400 mb-2 whitespace-nowrap">Coming Soon</div>
        <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-50">Ultimate Lens Kit</h3>
        <img src="https://picsum.photos/400/250?random=4" alt="Ultimate Lens Kit" class="w-full h-48 object-cover rounded-xl mb-6 shadow-md border border-gray-200 dark:border-gray-700 opacity-70 grayscale">
        <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-6 flex-grow">
          Expand your creative horizons with a versatile lens collection designed for superior optical performance. Pre-order now!
        </p>
        <ul class="space-y-3 mb-6 text-gray-500 dark:text-gray-400 opacity-70">
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd"></path></svg>
            <span>Prime Lens Included</span>
          </li>
          <li class="flex items-center text-sm">
            <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd"></path></svg>
            <span>Zoom Lens Features</span>
          </li>
        </ul>
      </div>
      <div class="px-6 pb-6 sm:px-8 sm:pb-8 pt-0">
        <p class="text-4xl font-extrabold text-gray-500 dark:text-gray-400 mb-6">Pre-Order</p>
        <button class="w-full px-6 py-3 rounded-xl font-bold text-lg bg-gray-200 hover:bg-gray-300 text-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300 transition-colors duration-300 cursor-not-allowed tracking-wide shadow-lg">
          Notify Me
        </button>
      </div>
    </div>

  </div>

  <!-- Call to action/footer -->
  <div class="mt-16 text-center text-gray-700 dark:text-gray-300">
    <p class="text-lg leading-relaxed mb-4">
      Considering an upgrade? Explore our full range of <a href="#" class="text-fuchsia-600 dark:text-fuchsia-500 hover:underline font-semibold">professional photo &amp; video equipment</a>.
    </p>
    <div class="flex items-center justify-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Photographer Avatar" class="w-12 h-12 rounded-full border-2 border-fuchsia-600 dark:border-fuchsia-500 shadow-md">
      <p class="text-sm">
        Curated by <span class="font-bold">Elijah Stone</span>, <span class="text-gray-500 dark:text-gray-400">Pro Photographer & Gear Expert</span>
      </p>
    </div>
  </div>

</div>

Composants associés

Composant de comparaison de produits

Un composant simple et réactif de comparaison de produits avec une esthétique Memphis Design, utilisant une palette de couleurs rétro/vintage. Conçu pour les outils CRM/Business, il prend en charge le mode sombre et affiche les principales fonctionnalités de deux produits.

Ouvrir

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.

Ouvrir

Composant de comparaison de produits - Style d’entreprise rétro

Un composant de comparaison de produits réactif avec une esthétique d’entreprise rétro/vintage utilisant une palette de couleurs bleues monochromatiques. Dispose de plusieurs éléments interactifs et de la prise en charge du mode sombre. Le design comprend des cartes de style rétro avec des motifs géométriques inspirés des années 80/90, une typographie à l’ancienne et des accents semblables à des pixels. Parfait pour les sites Web d’entreprise qui souhaitent se démarquer avec un design nostalgique tout en conservant leur professionnalisme.

Ouvrir