CCHub Logo CCHub Tailwind Collection
Componenti Confronto prodotti Componente di confronto dei prodotti

Componente di confronto dei prodotti

Un componente di confronto tra prodotti di lusso/premium per l'attrezzatura fotografica, caratterizzato da un design elegante, una tipografia sofisticata e una combinazione di colori ad alto contrasto. Include il supporto per il layout reattivo e la modalità scura.

Anteprima

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

Componenti correlati

Skeuomorphic_Product_Comparison_Component

Un componente di confronto dei prodotti semplice e reattivo con un design scheumorfico che utilizza una combinazione di colori blu scuro monocromatica, adatto per applicazioni di dashboard. Include il supporto per la modalità oscura.

Aperto

Componente di confronto dei prodotti per il neumorfismo

Un componente di confronto dei prodotti semplice e reattivo in stile neumorfismo con toni della terra, supporto per temi scuri e assenza di JavaScript.

Aperto

RetroVintageConfronto prodotti

Componente di confronto prodotti retrò/vintage per dashboard. Semplice design monocromatico con supporto per la modalità scura. Utilizza Tailwind CSS.

Aperto