Search Components

Product Comparison

Tool for comparing multiple products

Product Comparison Component

A playful and cheerful product comparison component with rounded elements and a complementary color scheme, suitable for a dashboard. Features responsive design and dark mode support.

Open Preview

                <div class="bg-white p-4 sm:p-6 lg:p-8 rounded-2xl shadow-xl max-w-4xl mx-auto my-8 dark:bg-gray-800 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-6 text-green-600 dark:text-green-400">Compare Our Fun Features!</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Product 1 Card -->
    <div class="bg-blue-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-blue-900/40">
      <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100?random=1" alt="Product 1" class="rounded-full border-4 border-blue-400 dark:border-blue-600 shadow-lg">
      </div>
      <h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-blue-800 dark:text-blue-300">Product Alpha 🎉</h3>
      
      <ul class="list-none space-y-3 text-lg text-blue-700 dark:text-blue-200">
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Super Speedy Performance</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Unlimited Whimsical Widgets</li>
        <li class="flex items-center"><span class="text-red-500 mr-2">&#10007;</span> No Unicorn Mode</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Friendly Support Sprites</li>
      </ul>
      <div class="text-center mt-6">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-800">
          Choose Alpha!
        </button>
      </div>
    </div>

    <!-- Product 2 Card -->
    <div class="bg-orange-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-orange-900/40">
      <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100?random=2" alt="Product 2" class="rounded-full border-4 border-orange-400 dark:border-orange-600 shadow-lg">
      </div>
      <h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-orange-800 dark:text-orange-300">Product Beta 🌟</h3>
      

      <ul class="list-none space-y-3 text-lg text-orange-700 dark:text-orange-200">
        <li class="flex items-center"><span class="text-red-500 mr-2">&#10007;</span> Standard Speed</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Dazzling Gimmicks Included</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Exclusive Unicorn Mode</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Mythical Support Beings</li>
      </ul>
      <div class="text-center mt-6">
        <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-orange-800">
          Select Beta!
        </button>
      </div>
    </div>
  </div>
</div>

Product Comparison Component - Neumorphism Monochromatic

A responsive product comparison component with a neumorphic design style and a monochromatic color scheme, suitable for event/conference websites. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-200 p-4 dark:bg-gray-800 flex items-center justify-center font-sans">

  <div class="container mx-auto p-4 md:p-8 rounded-3xl shadow-xl dark:shadow-xl-dark bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">

    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight leading-tight transition-colors duration-300">
      Choose Your <span class="text-purple-600 dark:text-purple-400">Event Pass</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Plan 1: Basic Pass -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Standard Access</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Ideal for basic conference attendance and networking.</p>

          <div class="text-4xl font-extrabold mb-8">
            $99<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Access to Main Sessions
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Networking Opportunities
            </li>
            <li class="flex items-center line-through text-gray-500 dark:text-gray-500">
              <svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              Workshop Access
            </li>
            <li class="flex items-center line-through text-gray-500 dark:text-gray-500">
              <svg class="w-6 h-6 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              Exclusive Q&A Sessions
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get Standard Pass
        </button>
      </div>

      <!-- Plan 2: Premium Pass (Recommended) -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover relative border-2 border-purple-500 dark:border-purple-400">
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-purple-500 dark:bg-purple-400 text-white text-sm font-bold rounded-full shadow-md">
          Recommended
        </div>
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">VIP Experience</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Full access to all event features and exclusive content.</p>

          <div class="text-4xl font-extrabold mb-8">
            $249<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Access to Main Sessions
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Networking Opportunities
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Full Workshop Access
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Exclusive Q&A Sessions
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get VIP Pass
        </button>
      </div>

      <!-- Plan 3: Enterprise Pass -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Team Bundle</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Designed for teams, with additional benefits and support.</p>

          <div class="text-4xl font-extrabold mb-8">
            $499<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/5 passes</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              All VIP Pass Features
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              5 Team Members Included
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Dedicated Support
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Private Networking Lounge Access
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 hover:bg-purple-700 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get Team Bundle
        </button>
      </div>

    </div>
  </div>

  <!-- Tailwind JIT custom styles for neumorphism shadows (typically in tailwind.config.js) -->
  <style>
    .shadow-xl {
      box-shadow: 10px 10px 20px rgba(174, 174, 192, .4), -10px -10px 20px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-xl-dark {
      box-shadow: 10px 10px 20px rgba(0, 0, 0, .4), -10px -10px 20px rgba(120, 120, 120, .2);
    }
    .shadow-neumorphic {
      box-shadow: 8px 8px 16px rgba(174, 174, 192, .4), -8px -8px 16px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-neumorphic {
      box-shadow: 8px 8px 16px rgba(0, 0, 0, .4), -8px -8px 16px rgba(120, 120, 120, .2);
    }
    .hover\:shadow-neumorphic-hover:hover {
      box-shadow: 4px 4px 8px rgba(174, 174, 192, .4), -4px -4px 8px rgba(255, 255, 255, 1);
    }
    .dark\:hover\:shadow-neumorphic-dark-hover:hover {
      box-shadow: 4px 4px 8px rgba(0, 0, 0, .4), -4px -4px 8px rgba(120, 120, 120, .2);
    }

    .shadow-neumorphic-button {
      box-shadow: 3px 3px 6px rgba(174, 174, 192, .4), -3px -3px 6px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-neumorphic-button-dark {
      box-shadow: 3px 3px 6px rgba(0, 0, 0, .4), -3px -3px 6px rgba(120, 120, 120, .2);
    }
    .hover\:shadow-neumorphic-button-hover:hover {
      box-shadow: inset 2px 2px 5px rgba(174, 174, 192, .4), inset -3px -3px 7px rgba(255, 255, 255, 1);
    }
    .dark\:hover\:shadow-neumorphic-button-dark-hover:hover {
      box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .6), inset -3px -3px 7px rgba(120, 120, 120, .3);
    }
  </style>

</div>

Product Comparison Component - Organic/Nature-inspired Autumn Colors

A complex, responsive product comparison component with an organic/nature-inspired design, using autumn colors. Suitable for sports and fitness applications, with full dark mode support.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-900 dark:text-stone-100 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-orange-800 dark:text-orange-400 mb-6 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
      Compare Your Game Changers
    </h2>
    <p class="mt-4 mb-12 text-xl text-center text-stone-700 dark:text-stone-300 max-w-3xl mx-auto leading-relaxed">
      Find the perfect fit for your athletic journey by comparing features, performance, and value across our top picks.
    </p>

    <div class="overflow-x-auto relative shadow-2xl rounded-3xl bg-white dark:bg-stone-800 p-2" style="background: linear-gradient(135deg, var(--tw-bg-from) 0%, var(--tw-bg-to) 100%); --tw-bg-from: #fef3c7; --tw-bg-to: #fed7aa; dark:--tw-bg-from: #3f3f46; dark:--tw-bg-to: #292524;">
      <table class="w-full text-left table-fixed border-separate [border-spacing:0.5rem] md:[border-spacing:1rem]">
        <thead>
          <tr class="text-sm text-stone-600 dark:text-stone-300 uppercase leading-snug">
            <th class="hidden lg:table-cell w-[12rem] md:w-[15rem] py-3 pl-4 sm:pl-6 bg-transparent"></th>
            <th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
              <div class="absolute inset-0 bg-orange-700 dark:bg-orange-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
              <p class="hidden sm:block text-orange-100 dark:text-orange-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Chosen</p>
              <h3 class="text-orange-100 dark:text-orange-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">SwiftStride</h3>
            </th>
            <th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
              <div class="absolute inset-0 bg-red-700 dark:bg-red-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
              <p class="hidden sm:block text-red-100 dark:text-red-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Alternative</p>
              <h3 class="text-red-100 dark:text-red-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">PeakPro</h3>
            </th>
            <th class="w-[8rem] sm:w-[10rem] md:w-[12rem] py-3 pr-4 sm:pr-6 align-bottom relative">
              <div class="absolute inset-0 bg-brown-700 dark:bg-brown-800 rounded-tl-xl rounded-tr-xl rounded-b-xl -z-10 group-hover:scale-105 transition-transform duration-300 ease-in-out"></div>
              <p class="hidden sm:block text-brown-100 dark:text-brown-200 text-xs font-semibold uppercase text-center" style="font-family: 'Georgia', serif;">Advanced</p>
              <h3 class="text-brown-100 dark:text-brown-200 text-lg sm:text-xl font-bold text-center mt-1" style="font-family: 'Georgia', serif;">EnduraMax</h3>
            </th>
          </tr>
        </thead>
        <tbody>
          <!-- Product Images & Prices -->
          <tr class="group">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 text-lg align-top">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L20 20m-6-6l-2-2m2-2l2-2"></path>
                </svg>
                <span>Product Snapshot</span>
              </div>
            </td>
            <td class="py-4 px-2 relative font-medium group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-orange-500 dark:group-hover:border-orange-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
                <img src="https://picsum.photos/id/178/150/150" alt="SwiftStride running shoes" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
                <span class="block text-sm sm:text-lg lg:text-xl font-bold text-orange-700 dark:text-orange-300">$129.99</span>
                <span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
              </div>
            </td>
            <td class="py-4 px-2 relative font-medium group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-red-500 dark:group-hover:border-red-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
                <img src="https://picsum.photos/id/187/150/150" alt="PeakPro hiking boots" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
                <span class="block text-sm sm:text-lg lg:text-xl font-bold text-red-700 dark:text-red-300">$99.99</span>
                <span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
              </div>
            </td>
            <td class="py-4 px-2 relative font-medium group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl border border-transparent group-hover:border-amber-500 dark:group-hover:border-amber-400 group-hover:shadow-lg transition-all duration-300 ease-in-out h-full">
                <img src="https://picsum.photos/id/163/150/150" alt="EnduraMax training gear" class="w-full sm:w-32 h-auto rounded-lg shadow-md mb-2">
                <span class="block text-sm sm:text-lg lg:text-xl font-bold text-brown-700 dark:text-brown-300">$149.99</span>
                <span class="block text-xs text-stone-600 dark:text-stone-400">Starting price</span>
              </div>
            </td>
          </tr>

          <!-- Key Features -->
          <tr class="group border-t border-stone-200 dark:border-stone-700 sticky top-0">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 rounded-bl-xl rounded-tr-xl transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4m5-12v4m-2-2h4M8 9h11a2 2 0 012 2v7a2 2 0 01-2 2H8l-4 4V9a2 2 0 012-2z"></path>
                </svg>
                <span>Key Features</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full text-left">
                <ul class="list-disc list-inside space-y-1 text-sm md:text-base">
                  <li>Lightweight</li>
                  <li>Responsive Sole</li>
                  <li>Breathable Mesh</li>
                </ul>
              </div>
            </td>
            <td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full text-left">
                <ul class="list-disc list-inside space-y-1 text-sm md:text-base">
                  <li>Durable Traction</li>
                  <li>Ankle Support</li>
                  <li>Water-Resistant</li>
                </ul>
              </div>
            </td>
            <td class="py-4 px-2 text-center text-stone-700 dark:text-stone-300 relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full text-left">
                <ul class="list-disc list-inside space-y-1 text-sm md:text-base">
                  <li>Compression Fit</li>
                  <li>Moisture-Wicking</li>
                  <li>UV Protection</li>
                </ul>
              </div>
            </td>
          </tr>

          <!-- Performance Rating -->
          <tr class="group">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm0 0V6m0 6a2 2 0 100-4 2 2 0 000 4zm12 5a2 2 0 100-4 2 2 0 000 4zm0 0V5"></path>
                </svg>
                <span>Performance Rating</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
                <p class="text-orange-600 dark:text-orange-400 font-bold text-xl">9.2/10</p>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
                <p class="text-red-600 dark:text-red-400 font-bold text-xl">8.5/10</p>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
                <p class="text-brown-600 dark:text-brown-400 font-bold text-xl">9.5/10</p>
              </div>
            </td>
          </tr>

          <!-- Customer Reviews -->
          <tr class="group border-b border-stone-200 dark:border-stone-700">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                </svg>
                <span>Customer Reviews</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
                <div class="flex items-center text-orange-500 dark:text-orange-400">
                  <span class="flex">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
                  <span class="ml-1 text-sm">(2.8K reviews)</span>
                </div>
                <blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
                  "Absolutely transformed my runs! So light and supportive. A definite must-have for serious athletes."
                  <cite class="block not-italic mt-1 font-bold">- Alex P.</cite>
                </blockquote>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
                <div class="flex items-center text-red-500 dark:text-red-400">
                  <span class="flex">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
                  <span class="ml-1 text-sm">(1.5K reviews)</span>
                </div>
                <blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
                  "Great for trails, very sturdy. Took a little breaking in, but worth it for the grip and durability."
                  <cite class="block not-italic mt-1 font-bold">- Jamie L.</cite>
                </blockquote>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
                <div class="flex items-center text-brown-500 dark:text-brown-400">
                  <span class="flex">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
                  <span class="ml-1 text-sm">(3.1K reviews)</span>
                </div>
                <blockquote class="text-xs sm:text-sm italic text-stone-600 dark:text-stone-400 mt-2 line-clamp-3">
                  "Unbeatable comfort and performance. Whether gym or field, this gear keeps me cool and focused."
                  <cite class="block not-italic mt-1 font-bold">- Chris M.</cite>
                </blockquote>
              </div>
            </td>
          </tr>

          <!-- Action Buttons -->
          <tr class="group">
            <td class="hidden lg:table-cell py-4 pl-4 sm:pl-6 font-semibold text-stone-800 dark:text-stone-200 group-hover:bg-amber-100 dark:group-hover:bg-stone-700 rounded-bl-xl rounded-tr-xl transition-colors duration-300">
              <div class="flex items-center space-x-3">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
                <span>Take Action</span>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-orange-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-orange-500 dark:group-hover:border-orange-400 transition-all duration-300 ease-in-out h-full">
                <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
                  <svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
                  </svg>
                  Buy Now
                </a>
                <a href="#" class="mt-2 text-orange-600 dark:text-orange-400 text-xs sm:text-sm hover:underline">Learn More</a>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-red-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-red-500 dark:group-hover:border-red-400 transition-all duration-300 ease-in-out h-full">
                <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:bg-red-700 dark:hover:bg-red-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
                  <svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
                  </svg>
                  Add to Cart
                </a>
                <a href="#" class="mt-2 text-red-600 dark:text-red-400 text-xs sm:text-sm hover:underline">View Details</a>
              </div>
            </td>
            <td class="py-4 px-2 text-center relative group-hover:z-10">
              <div class="absolute inset-0 rounded-2xl bg-amber-100 dark:bg-stone-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
              <div class="relative flex flex-col items-center justify-center p-2 rounded-xl group-hover:border-amber-500 dark:group-hover:border-amber-400 transition-all duration-300 ease-in-out h-full">
                <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-brown-600 hover:bg-brown-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-offset-stone-800 transition-colors duration-200 w-full sm:w-auto">
                  <svg class="-ml-1 mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 1a1 1 0 000 2h1a1 1 0 000-2H3zM10 5a1 1 0 011 1v2a1 1 0 11-2 0V6a1 1 0 011-1zm-6 4a1 1 0 000 2h1a1 1 0 000-2H4zM2 10a2 2 0 002 2h3a3 3 0 013 3v2a1 1 0 001 1h5a1 1 0 00.957-1.29l-3-10A1 1 0 0013 4h-4a1 1 0 00-.957.71l-3 10A1 1 0 002 10z"></path>
                  </svg>
                  Shop Now
                </a>
                <a href="#" class="mt-2 text-brown-600 dark:text-brown-400 text-xs sm:text-sm hover:underline">Customize</a>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="mt-12 text-center">
      <p class="text-stone-700 dark:text-stone-300 text-lg sm:text-xl max-w-2xl mx-auto leading-relaxed">
        Still unsure? Our expert team is ready to guide you to your perfect sports gear. <a href="#" class="text-orange-700 dark:text-orange-400 font-semibold hover:underline">Contact us today!</a>
      </p>
    </div>
  </div>
</div>

Product Comparison Component - Watercolor/Artistic

A complex, monochromatic product comparison component designed for industrial/manufacturing use, featuring a soft, watercolor/artistic aesthetic with dark mode support. Allows users to compare multiple products side-by-side.

Open Preview

                <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8 font-sans overflow-x-auto">
  <div class="max-w-6xl mx-auto py-8">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center text-indigo-900 dark:text-indigo-100 mb-8 sm:mb-12 tracking-tight" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
      Industrial Product Comparison
    </h2>
    <p class="text-center text-lg text-indigo-700 dark:text-indigo-300 mb-10 sm:mb-16 max-w-2xl mx-auto leading-relaxed">
      Compare the features and specifications of our high-performance industrial equipment. Make an informed decision for your manufacturing needs.
    </p>

    <div class="w-full overflow-x-auto relative">
      <div class="flex space-x-6 pb-4 sm:pb-6 pr-4" style="min-width: fit-content;">
        <!-- Feature Column Header -->
        <div class="flex-shrink-0 w-64 min-w-[250px] bg-indigo-200/50 dark:bg-gray-700/50 rounded-lg p-6 flex flex-col justify-between shadow-lg border border-indigo-300 dark:border-gray-600 backdrop-blur-sm">
          <h3 class="text-2xl font-bold text-indigo-900 dark:text-indigo-100 mb-6">Features</h3>
          <ul class="space-y-4 text-indigo-800 dark:text-indigo-200 text-lg flex-grow">
            <li class="font-semibold py-2">Product Image</li>
            <li class="font-semibold py-2">Product Name</li>
            <li class="font-semibold py-2">Model Number</li>
            <li class="font-semibold py-2">Material Strength</li>
            <li class="font-semibold py-2">Operating Temperature Range</li>
            <li class="font-semibold py-2">Power Consumption (kW)</li>
            <li class="font-semibold py-2">Durability Rating</li>
            <li class="font-semibold py-2">Warranty (Years)</li>
            <li class="font-semibold py-2">Included Accessories</li>
            <li class="font-semibold py-2">Certification Standards</li>
            <li class="font-semibold py-2">Price</li>
          </ul>
          <div class="mt-8">
            <!-- Placeholder for alignment -->
          </div>
        </div>

        <!-- Product 1 -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=1" alt="Industrial Machine Alpha" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">HydraFlex 3000i</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: HFX-3000i</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">HFX-3000i</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Titanium Alloy</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">-20°C to 150°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">15 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Excellent (9.5/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">5 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Tool Kit, Manual </span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">ISO 9001, CE Certified</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$12,500</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

        <!-- Product 2 -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=2" alt="Industrial Machine Beta" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">MegaPress X100</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: MP-X100</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">MP-X100</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Reinforced Steel</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">0°C to 200°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">20 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Superior (9.8/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">7 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Hydraulic Hoses, Filters</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">ASTM, RoHS Compliant</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$18,000</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

        <!-- Product 3 (Optional extra product) -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=3" alt="Industrial Machine Gamma" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">QuantumFabricator</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: QFX-500</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">QFX-500</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Carbon Fiber Composite</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">-5°C to 180°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">18 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Excellent (9.2/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">6 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Spare Parts Kit, Software</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">CE, UL Certified</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$15,200</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

      </div>
    </div>

    <div class="mt-16 text-center">
      <p class="text-indigo-800 dark:text-indigo-200 text-lg sm:text-xl font-medium">
        Need assistance? Our experts are ready to help you choose the right solution.
      </p>
      <a href="#" class="inline-block mt-6 px-8 py-4 bg-indigo-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-70 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
        Contact Sales
      </a>
    </div>
  </div>
</div>

Product Comparison Component - Crypto

A responsive product comparison component with a luxury/premium design, candy/sweet color scheme, tailored for cryptocurrency/blockchain applications. Features dark mode support, elegant typography, and placeholder data.

Open Preview

                <div class="font-sans bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 p-4 md:p-8 lg:p-12 min-h-screen">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-2xl overflow-hidden animate-fade-in">
    <header class="p-6 md:p-8 bg-gradient-to-r from-pink-400 to-purple-400 dark:from-gray-700 dark:to-gray-900 text-white dark:text-gray-100 text-center">
      <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-2">
        Choose Your Crypto Platform
      </h1>
      <p class="text-lg md:text-xl opacity-90">
        Compare features to find your perfect blockchain solution.
      </p>
    </header>

    <div class="relative overflow-x-auto">
      <table class="w-full table-auto border-separate border-spacing-y-2 lg:border-spacing-y-4 p-4">
        <thead class="sr-only lg:not-sr-only">
          <tr>
            <th class="w-1/4 p-4 text-left text-lg font-semibold text-gray-600 dark:text-gray-300"></th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Alpha</th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Beta</th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Gamma</th>
          </tr>
        </thead>
        <tbody>
          <!-- Product Headers for Mobile/Tablet -->
          <tr class="lg:hidden">
            <td class="py-4 px-2 sm:px-4 lg:px-6 w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Alpha</h3>
                <img src="https://picsum.photos/300/200?random=1" alt="Platform Alpha Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">A leading-edge blockchain for DeFi.</p>
              </div>
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Beta</h3>
                <img src="https://picsum.photos/300/200?random=2" alt="Platform Beta Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">Scalable enterprise-grade blockchain.</p>
              </div>
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Gamma</h3>
                <img src="https://picsum.photos/300/200?random=3" alt="Platform Gamma Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">NFTs and digital asset powerhouse.</p>
              </div>
            </td>
          </tr>

          <!-- Product Details Row (Desktop) -->
          <tr class="hidden lg:table-row">
            <td class="py-4 px-6 text-gray-600 dark:text-gray-300 font-medium align-top"></td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Alpha</h3>
              <img src="https://picsum.photos/300/200?random=1" alt="Platform Alpha Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">A leading-edge blockchain for DeFi.</p>
            </td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Beta</h3>
              <img src="https://picsum.photos/300/200?random=2" alt="Platform Beta Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">Scalable enterprise-grade blockchain.</p>
            </td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Gamma</h3>
              <img src="https://picsum.photos/300/200?random=3" alt="Platform Gamma Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">NFTs and digital asset powerhouse.</p>
            </td>
          </tr>

          <!-- Feature Row: Consensus Mechanism -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-pink-300 dark:border-pink-600 rounded-l-xl">Consensus Mechanism</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-pink-500 dark:text-pink-400">PoS (Proof of Stake)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-purple-500 dark:text-purple-400">DPoS (Delegated PoS)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-green-500 dark:text-green-400">PoW (Proof of Work)</td>
          </tr>

          <!-- Feature Row: Transaction Speed -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-purple-300 dark:border-purple-600 rounded-l-xl">Tx Speed (TPS)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">5,000+</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">100,000+</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">7-10</td>
          </tr>

          <!-- Feature Row: Transaction Fees (Avg) -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-green-300 dark:border-green-600 rounded-l-xl">Avg. Tx Fee</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-green-600 dark:text-green-300 font-semibold">$0.01 - $0.10</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-green-600 dark:text-green-300 font-semibold">&lt; $0.01</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-orange-600 dark:text-orange-300 font-semibold">$1 - $50 (volatile)</td>
          </tr>

          <!-- Feature Row: Smart Contract Support -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-pink-300 dark:border-pink-600 rounded-l-xl">Smart Contracts</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-green-500 mx-auto" 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>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-green-500 mx-auto" 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>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-red-500 mx-auto" 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.586 8.707 7.293z" clip-rule="evenodd"></path></svg>
            </td>
          </tr>

          <!-- Feature Row: Decentralization Level -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-purple-300 dark:border-purple-600 rounded-l-xl">Decentralization</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">High</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">Medium-High</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">Very High</td>
          </tr>

          <!-- Feature Row: Typical Use Cases -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-green-300 dark:border-green-600 rounded-l-xl">Use Cases</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">DeFi, Dapps, GameFi</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">Enterprise, CBDC, Supply Chain</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">Store of Value, NFTs, Payments</td>
          </tr>

          <!-- Call to Action Row -->
          <tr class="bg-gradient-to-r from-pink-50 dark:from-gray-700 via-purple-50 dark:via-gray-800 to-green-50 dark:to-gray-900 rounded-xl">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium align-middle">Get Started</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Alpha
              </button>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Beta
              </button>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Gamma
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <footer class="p-6 md:p-8 bg-gradient-to-l from-pink-400 to-purple-400 dark:from-gray-900 dark:to-gray-700 text-white dark:text-gray-100 text-center">
      <p class="text-sm opacity-80">&copy; 2023 Crypto Compare. All rights reserved.</p>
      <p class="text-xs mt-1 opacity-70">Data for illustrative purposes only. Consult official sources.</p>
    </footer>
  </div>
</div>

Product Comparison Component

A luxury/premium product comparison component for photography gear, featuring elegant design, sophisticated typography, and a high-contrast color scheme. Includes responsive layout and dark mode support.

Open Preview

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

Product Comparison Component

A simple, responsive product comparison component with a Memphis Design aesthetic, using a retro/vintage color palette. Designed for CRM/Business Tools, it supports dark mode and displays key features for two products.

Open Preview

                <div class="bg-amber-100 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-teal-400 mb-8 text-center tracking-tight uppercase relative">
      <span class="block">Compare Products</span>
      <span class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-2 bg-pink-500 dark:bg-purple-500 rounded-full mt-2"></span>
    </h2>

    <div class="flex flex-col md:flex-row gap-6 lg:gap-8 justify-center items-stretch">

      <!-- Product Card 1 -->
      <div class="flex-1 bg-yellow-300 dark:bg-gray-800 rounded-3xl p-6 lg:p-8 shadow-xl relative overflow-hidden transform hover:scale-102 transition-all duration-300
                  border-4 border-blue-600 dark:border-teal-500 border-l-0 border-b-0 border-r-0 border-t-0 animate-pulse-border">
        <div class="absolute top-0 right-0 w-24 h-24 bg-pink-500 dark:bg-purple-600 -rotate-45 transform translate-x-12 -translate-y-12"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-teal-400 dark:bg-pink-600 rotate-45 transform -translate-x-16 translate-y-16"></div>

        <div class="relative z-10">
          <h3 class="text-2xl font-bold text-blue-800 dark:text-yellow-300 mb-4 text-center uppercase tracking-wider">Business Pro</h3>
          <div class="flex justify-center mb-6">
            <img src="https://picsum.photos/id/1015/150/150" alt="Product Lite" class="rounded-full w-24 h-24 object-cover border-4 border-blue-600 dark:border-teal-500 shadow-md">
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-center mb-6 leading-relaxed">The essential tools for growing teams.</p>

          <ul class="space-y-3 mb-6 text-gray-800 dark:text-gray-200">
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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 class="font-semibold">Unlimited</span> CRM Contacts
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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 class="font-semibold">Email</span> Marketing Suite
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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 class="font-semibold">Basic</span> Analytics Dashboard
            </li>
          </ul>

          <div class="text-center">
            <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 mt-4 relative overflow-hidden group">
              <span class="relative z-10">Choose Product Pro</span>
              <span class="absolute inset-0 bg-blue-700 dark:bg-teal-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="flex-1 bg-red-300 dark:bg-gray-800 rounded-3xl p-6 lg:p-8 shadow-xl relative overflow-hidden transform hover:scale-102 transition-all duration-300
                  border-4 border-pink-600 dark:border-purple-500 border-l-0 border-b-0 border-r-0 border-t-0 animate-pulse-border">
        <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 dark:bg-teal-600 rotate-45 transform translate-x-16 -translate-y-16"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-yellow-500 dark:bg-pink-600 -rotate-45 transform -translate-x-12 translate-y-12"></div>

        <div class="relative z-10">
          <h3 class="text-2xl font-bold text-pink-700 dark:text-purple-300 mb-4 text-center uppercase tracking-wider">Enterprise Max</h3>
          <div class="flex justify-center mb-6">
            <img src="https://picsum.photos/id/1025/150/150" alt="Product Pro" class="rounded-full w-24 h-24 object-cover border-4 border-pink-600 dark:border-purple-500 shadow-md">
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-center mb-6 leading-relaxed">The ultimate solution for large-scale operations.</p>

          <ul class="space-y-3 mb-6 text-gray-800 dark:text-gray-200">
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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 class="font-semibold">Unlimited</span> CRM Contacts
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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 class="font-semibold">Advanced</span> Marketing Automation
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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 class="font-semibold">Custom</span> Reporting Engine
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" 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 class="font-semibold">Dedicated</span> Account Manager
            </li>
          </ul>

          <div class="text-center">
            <a href="#" class="inline-block bg-pink-600 hover:bg-pink-700 dark:bg-purple-500 dark:hover:bg-purple-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 mt-4 relative overflow-hidden group">
              <span class="relative z-10">Choose Enterprise Max</span>
              <span class="absolute inset-0 bg-pink-700 dark:bg-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
/* Define pulse-border animation */
@keyframes pulse-border {
  0% { border-color: rgba(96, 165, 250, 0.5); }
  50% { border-color: rgba(96, 165, 250, 1); }
  100% { border-color: rgba(96, 165, 250, 0.5); }
}

.dark .animate-pulse-border {
    animation: none; /* Disable on dark mode to prevent visual conflict with dark color scheme */
}

.animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
}

/* Adjust for dark mode borders here if a similar effect is desired with dark colors */
.dark .bg-gray-800.border-teal-500.dark\\:border-teal-500 {
    animation: pulse-border-dark 2s infinite ease-in-out;
}

.dark .bg-gray-800.border-purple-500.dark\\:border-purple-500 {
    animation: pulse-border-darker 2s infinite ease-in-out;
}

@keyframes pulse-border-dark {
  0% { border-color: rgba(20, 184, 166, 0.5); }
  50% { border-color: rgba(20, 184, 166, 1); }
  100% { border-color: rgba(20, 184, 166, 0.5); }
}

@keyframes pulse-border-darker {
  0% { border-color: rgba(168, 85, 247, 0.5); }
  50% { border-color: rgba(168, 85, 247, 1); }
  100% { border-color: rgba(168, 85, 247, 0.5); }
}

</style>

Skeuomorphic_Product_Comparison_Component

A simple, responsive product comparison component with a skeuomorphic design using a monochromatic dark blue color scheme, suitable for dashboard applications. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans flex items-center justify-center">
  <div class="w-full max-w-4xl bg-blue-50 dark:bg-gray-700 rounded-xl shadow-xl border border-blue-200 dark:border-gray-600 overflow-hidden
              transform perspective-1000 rotate-x-3 transition-transform duration-500 hover:rotate-x-0 hover:scale-105 ease-in-out
              m-4 md:m-8 lg:m-12 relative">
    
    <!-- Top 'bezel' light reflection effect -->
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-b from-blue-100/50 to-transparent dark:from-gray-600/50 dark:to-transparent rounded-t-xl"></div>
    
    <div class="p-6 sm:p-8 md:p-10 flex flex-col items-center">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-6 relative z-10
                 drop-shadow-md text-shadow-sm-light dark:text-shadow-sm-dark tracking-wide">
        Product Comparison
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">

        <!-- Product 1 Card -->
        <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-inner-xl border border-blue-200 dark:border-gray-600
                    transform transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl relative
                    flex flex-col items-center text-center">
          <!-- Inner 'screen' effect -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-blue-100/50 dark:from-gray-900/50 dark:to-gray-800/50 rounded-lg"></div>
          <div class="relative z-10 w-full">
            <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-4">Product Alpha</h3>
            <img src="https://picsum.photos/300/200?random=1" alt="Product Alpha" class="w-full h-auto rounded-md mb-4 shadow-md border border-blue-300 dark:border-gray-500" loading="lazy">
            <p class="text-blue-600 dark:text-blue-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <ul class="text-left text-blue-700 dark:text-blue-300 text-sm space-y-2 mb-4 list-none p-0 flex flex-col items-start w-full">
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature A</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature B</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-red-500 mr-2 shadow-sm"></span>Feature C (Missing)</li>
            </ul>
            <div class="text-2xl font-bold text-blue-800 dark:text-blue-100 mb-4">$199.99</div>
            <button class="px-6 py-2 bg-blue-600 text-white rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                           active:shadow-inner-sm border border-blue-700 dark:border-blue-500 
                           transform transition-transform duration-150 active:scale-95 active:shadow-md-inset 
                           dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
              Select Product Alpha
            </button>
          </div>
        </div>

        <!-- Product 2 Card -->
        <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-inner-xl border border-blue-200 dark:border-gray-600
                    transform transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl relative
                    flex flex-col items-center text-center">
          <!-- Inner 'screen' effect -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-blue-100/50 dark:from-gray-900/50 dark:to-gray-800/50 rounded-lg"></div>
          <div class="relative z-10 w-full">
            <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-4">Product Beta</h3>
            <img src="https://picsum.photos/300/200?random=2" alt="Product Beta" class="w-full h-auto rounded-md mb-4 shadow-md border border-blue-300 dark:border-gray-500" loading="lazy">
            <p class="text-blue-600 dark:text-blue-400 text-sm mb-4">Consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <ul class="text-left text-blue-700 dark:text-blue-300 text-sm space-y-2 mb-4 list-none p-0 flex flex-col items-start w-full">
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature A</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature B</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature C</li>
            </ul>
            <div class="text-2xl font-bold text-blue-800 dark:text-blue-100 mb-4">$249.99</div>
            <button class="px-6 py-2 bg-blue-600 text-white rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                           active:shadow-inner-sm border border-blue-700 dark:border-blue-500 
                           transform transition-transform duration-150 active:scale-95 active:shadow-md-inset
                           dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
              Select Product Beta
            </button>
          </div>
        </div>

      </div>
    </div>
    
    <!-- Bottom 'bezel' dark reflection/shadow effect -->
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-t from-blue-300/50 to-transparent dark:from-gray-950/50 dark:to-transparent rounded-b-xl"></div>
    
  </div>
</div>

<!-- Custom Styles for Skeuomorphism -->
<style>
  /* Light mode text shadow */
  .text-shadow-sm-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4),
                 -1px -1px 2px rgba(0, 0, 0, 0.2);
  }

  /* Dark mode text shadow */
  .dark .text-shadow-sm-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),
                 -1px -1px 2px rgba(255, 255, 255, 0.1);
  }

  /* Outer shadow for the main container - resembles lifting off the surface */
  .shadow-xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .dark .shadow-xl {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  }

  /* Inner shadow for product cards - resembles an indented button or screen */
  .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0px 5px 10px -3px rgba(0, 0, 0, 0.1), inset 0px -5px 10px -3px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2),
                inset 0px 5px 10px -3px rgba(0, 0, 0, 0.3),
                inset 0px -5px 10px -3px rgba(255, 255, 255, 0.05);
  }

  /* Active state for buttons - pressing effect */
  .active\:shadow-md-inset {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15),
                inset 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .dark .active\:shadow-md-inset {
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3),
                 inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  }

  /* 3D perspective for the main container */
  .perspective-1000 {
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  .rotate-x-3 {
    transform: rotateX(3deg);
  }
  .hover\:rotate-x-0:hover {
    transform: rotateX(0deg);
  }
</style>

Product Comparison Component

A complex, responsive product comparison component with 3D design elements, a triadic color scheme, and dark mode support, suitable for a dashboard context.

Open Preview

                <div class="bg-gradient-to-br from-indigo-50 to-purple-50 via-pink-50 min-h-screen p-4 sm:p-8 lg:p-12 font-sans dark:from-gray-900 dark:to-black dark:via-gray-800 text-gray-800 dark:text-gray-200">

  <!-- Component Title -->
  <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 relative z-10 animate-fade-in-down transform scale-y-105 transition-transform duration-500 hover:scale-y-100
    bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-indigo-600
    dark:from-purple-400 dark:via-pink-300 dark:to-indigo-400
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-purple-200 before:via-pink-100 before:to-indigo-200 before:blur-lg before:-z-10 before:opacity-50 dark:before:from-gray-700 dark:before:via-gray-800 dark:before:to-gray-900">
    Product Comparison
  </h1>

  <!-- Comparison Grid Container -->
  <div class="grid gap-8 lg:gap-12 xl:grid-cols-3 max-w-7xl mx-auto">

    <!-- Product Card 1 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-purple-400
      dark:from-gray-800 dark:to-gray-900 dark:border-purple-600
      after:content-[''] after:absolute after:inset-0 after:bg-purple-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-purple-500 to-indigo-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        Popular Choice
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product1/250/180" alt="Product A" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-2">Product Alpha</h2>
        <p class="text-gray-600 dark:text-gray-400">Cutting-edge features for professionals.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Advanced AI Engine</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Unlimited Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">24/7 Premium Support</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Limited Storage</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg shadow-purple-200
          hover:from-purple-700 hover:to-indigo-700 hover:scale-105 hover:shadow-xl hover:shadow-purple-300
          dark:from-purple-500 dark:to-indigo-500 dark:shadow-purple-700 dark:hover:from-purple-600 dark:hover:to-indigo-600 dark:hover:shadow-purple-600">
          Choose Alpha
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-pink-400
      dark:from-gray-800 dark:to-gray-900 dark:border-pink-600
      after:content-[''] after:absolute after:inset-0 after:bg-pink-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-pink-500 to-red-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        Best Value
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product2/250/180" alt="Product B" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 to-red-600 dark:from-pink-400 dark:to-red-400 mb-2">Product Beta</h2>
        <p class="text-gray-600 dark:text-gray-400">Balanced features for everyday use.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Intelligent Automation</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">100 GB Storage</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Standard Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Standard Support</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-pink-600 to-red-600 text-white shadow-lg shadow-pink-200
          hover:from-pink-700 hover:to-red-700 hover:scale-105 hover:shadow-xl hover:shadow-pink-300
          dark:from-pink-500 dark:to-red-500 dark:shadow-pink-700 dark:hover:from-pink-600 dark:hover:to-red-600 dark:hover:shadow-pink-600">
          Select Beta
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-yellow-400
      dark:from-gray-800 dark:to-gray-900 dark:border-yellow-600
      after:content-[''] after:absolute after:inset-0 after:bg-yellow-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-yellow-500 to-orange-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        New Arrival
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product3/250/180" alt="Product C" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-600 to-orange-600 dark:from-yellow-400 dark:to-orange-400 mb-2">Product Gamma</h2>
        <p class="text-gray-600 dark:text-gray-400">Essential features for everyday users.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-yellow-500 dark:text-yellow-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Basic Analytics</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Limited Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Community Support</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>No AI Engine</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-yellow-600 to-orange-600 text-white shadow-lg shadow-yellow-200
          hover:from-yellow-700 hover:to-orange-700 hover:scale-105 hover:shadow-xl hover:shadow-yellow-300
          dark:from-yellow-500 dark:to-orange-500 dark:shadow-yellow-700 dark:hover:from-yellow-600 dark:hover:to-orange-600 dark:hover:shadow-yellow-600">
          Choose Gamma
        </button>
      </div>
    </div>

  </div>

  <!-- Key Feature Comparison Table (Optional for more complexity) -->
  <div class="mt-16 bg-white dark:bg-gray-850 p-8 rounded-3xl shadow-2xl overflow-x-auto relative z-10 animate-fade-in-up
    border border-gray-100 dark:border-gray-700
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-purple-50 before:via-pink-50 before:to-yellow-50 before:blur-3xl before:-z-10 before:opacity-50 dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-gray-900">
    <h3 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-600 dark:from-purple-400 dark:via-pink-300 dark:to-yellow-400 mb-8 text-center">Detailed Feature Comparison</h3>
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-gray-50 dark:bg-gray-750">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400 rounded-tl-xl">Feature</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Product Alpha</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Product Beta</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400 rounded-tr-xl">Product Gamma</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">AI Capabilities</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-rose-500 dark:text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Storage Capacity</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Variable</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">100 GB</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">50 GB</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Integrations</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Unlimited</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Standard</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Basic</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Support</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">24/7 Premium</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Email/Chat</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Community</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Uptime Guarantee</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99.9%</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99.5%</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99%</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

<style>
  /* This is for the '3D' effect on images and cards */
  .perspective-1000 {
    perspective: 1000px;
  }

  .rotate-x-6 {
    transform: rotateX(6deg);
  }

  /* Keyframe for fade-in-down animation */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
  }

  /* Keyframe for fade-in-up animation */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  /* Custom shadow for pseudo 3D effect on hover */
  .shadow-3xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), /* Default Tailwind 2xl */
                0 0 60px -15px rgba(0, 0, 0, 0.5);
  }

  .dark .shadow-3xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), /* Darker for dark mode */
                0 0 60px -15px rgba(0, 0, 0, 0.9);
  }

  /* Tailwind does not have a native way to apply custom properties in CSS, 
     so a custom class for backdrop color is used for the overall theme. */
  body {
    @apply bg-gradient-to-br from-indigo-50 to-purple-50 via-pink-50 dark:from-gray-900 dark:to-black dark:via-gray-800;
  }
</style>

Product Comparison Component

A responsive product comparison component with dark theme support, featuring a minimalist/flat design and a pastel color scheme. This complex component is suitable for dashboards, allowing users to compare multiple products with detailed specifications and interactive elements.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Product Comparison</h2>

  <!-- Comparison Table -->
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-lime-50 dark:bg-lime-900">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Feature</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product A</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product B</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-lime-600 dark:text-lime-200 uppercase tracking-wider">Product C</th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Image</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productA/200/200" alt="Product A">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product A</p>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productB/200/200" alt="Product B">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product B</p>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <img class="h-24 w-24 object-cover rounded-md mx-auto" src="https://picsum.photos/seed/productC/200/200" alt="Product C">
            <p class="text-center text-sm text-gray-600 dark:text-gray-300 mt-2">Product C</p>
          </td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Price</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$199.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$249.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">$179.99</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Rating</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★☆</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★★★</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">★★★☆☆</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C1</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Key Feature 2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description A2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description B2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Description C2</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">Availability</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-emerald-600 dark:text-emerald-400">In Stock</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 dark:text-red-400">Out of Stock</td>
        </tr>
        <!-- Add more rows for additional features as needed -->
      </tbody>
    </table>
  </div>

  <!-- Call to Action Buttons -->
  <div class="mt-6 flex flex-col sm:flex-row justify-around items-center space-y-4 sm:space-y-0 sm:space-x-4">
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
      Buy Product A
    </button>
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800">
      Buy Product B
    </button>
    <button class="w-full sm:w-auto px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-lime-300 cursor-not-allowed dark:bg-lime-700 dark:text-lime-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800" disabled>
      Buy Product C (Out of Stock)
    </button>
  </div>

  <!-- Additional Interactive Elements -->
  <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Product A Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product A Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>High performance processor</li>
        <li>Long-lasting battery</li>
        <li>Excellent user reviews</li>
      </ul>
    </div>

    <!-- Product B Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product B Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>Superior camera quality</li>
        <li>Sleek, slim design</li>
        <li>Advanced security features</li>
      </ul>
    </div>

    <!-- Product C Details Card -->
    <div class="bg-lime-50 dark:bg-lime-900 p-4 rounded-lg shadow-sm">
      <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-200 mb-2">Product C Highlights</h3>
      <ul class="text-sm text-gray-700 dark:text-gray-300 list-disc list-inside space-y-1">
        <li>Budget-friendly option</li>
        <li>Good for everyday use</li>
        <li>Compact and portable</li>
      </ul>
    </div>
  </div>

  <!-- User Reviews Section -->
  <div class="mt-8">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h3>
    <div class="space-y-4">
      <!-- Review 1 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Jane Doe</p>
          <p class="text-sm text-yellow-500">★★★★★</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product B is absolutely fantastic! The camera is unreal, and it's so fast. Highly recommend!"</p>
        </div>
      </div>
      <!-- Review 2 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">John Smith</p>
          <p class="text-sm text-yellow-500">★★★★☆</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product A is a solid choice for the price. Does everything I need it to do. Battery life is impressive."</p>
        </div>
      </div>
      <!-- Review 3 -->
      <div class="bg-fuchsia-50 dark:bg-fuchsia-900 p-4 rounded-lg shadow-sm flex items-start space-x-4">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-fuchsia-800 dark:text-fuchsia-200">Emily White</p>
          <p class="text-sm text-yellow-500">★★★☆☆</p>
          <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">"Product C is okay for the budget, but you definitely get what you pay for. Wish the camera was better."</p>
        </div>
      </div>
    </div>
  </div>
</div>

Search Components

Categories

Product Comparison