CCHub Logo CCHub Tailwind Collection
Componentes Comparación de productos Componente de comparación de productos

Componente de comparación de productos

Un componente de comparación de productos de lujo/premium para equipos fotográficos, con un diseño elegante, una tipografía sofisticada y una combinación de colores de alto contraste. Incluye diseño responsivo y soporte para modo oscuro.

Vista previa

Código HTML 

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

Componentes relacionados

Componente de comparación de productos - Crypto

Un componente de comparación de productos receptivo con un diseño de lujo/premium, combinación de colores dulces/dulces, adaptado para aplicaciones de criptomonedas/blockchain. Cuenta con soporte para modo oscuro, tipografía elegante y datos de marcador de posición.

Abrir

Componente de comparación de productos

Un componente de comparación de productos simple y receptivo con soporte para modo oscuro usando Tailwind CSS. Muestra los nombres de los productos, las características y los precios para su comparación.

Abrir

Componente de comparación de productos - Estilo corporativo retro

Un componente de comparación de productos receptivo con una estética corporativa retro / vintage que utiliza un esquema de color azul monocromático. Cuenta con múltiples elementos interactivos y soporte para el modo oscuro. El diseño incluye tarjetas de estilo retro con patrones geométricos inspirados en los años 80/90, tipografía de la vieja escuela y acentos tipo píxel. Perfecto para sitios web de negocios que desean destacarse con un diseño nostálgico manteniendo el profesionalismo.

Abrir