Search Components

Product Comparison

Tool for comparing multiple products

Product Comparison Component

A simple, playful product comparison component designed with autumn colors, suitable for documentation or wiki sites. Features rounded elements, full responsiveness, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-orange-50 dark:bg-stone-900 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 rounded-3xl shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 lg:p-10 text-center bg-orange-100 dark:bg-stone-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-200 mb-2">Compare Our Fun Features!</h2>
      <p class="text-orange-600 dark:text-orange-300 text-base sm:text-lg">See how our playful products stack up.</p>
    </div>

    <div class="flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-orange-200 dark:divide-stone-700">

      <!-- Product 1 -->
      <div class="flex-1 p-6 sm:p-8 lg:p-10 text-center">
        <h3 class="text-xl sm:text-2xl font-bold text-orange-700 dark:text-orange-300 mb-4">Happy Widget 🥳</h3>
        <img src="https://picsum.photos/300/200?random=1" alt="Happy Widget" class="w-full h-32 sm:h-40 object-cover rounded-xl mb-6 shadow-md">
        
        <ul class="text-sm sm:text-base text-stone-700 dark:text-stone-300 space-y-3 mb-6">
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Simple Setup</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Playful Interface</li>
          <li class="flex items-center justify-center"><span class="text-red-500 mr-2 text-lg">&#10007;</span> Advanced Analytics</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Friendly Support</li>
        </ul>

        <div class="text-4xl font-extrabold text-orange-900 dark:text-orange-100 mb-6">$19<span class="text-base text-stone-500 dark:text-stone-400 font-normal">/mo</span></div>
        <a href="#" class="inline-block px-8 py-3 bg-orange-500 text-white font-semibold rounded-full shadow-lg hover:bg-orange-600 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition duration-300 ease-in-out">Choose Happy!</a>
      </div>

      <!-- Product 2 -->
      <div class="flex-1 p-6 sm:p-8 lg:p-10 text-center bg-orange-50 dark:bg-stone-700">
        <h3 class="text-xl sm:text-2xl font-bold text-burgundy-900 dark:text-burgundy-100 mb-4">Super Gizmo ✨</h3>
        <img src="https://picsum.photos/300/200?random=2" alt="Super Gizmo" class="w-full h-32 sm:h-40 object-cover rounded-xl mb-6 shadow-md">

        <ul class="text-sm sm:text-base text-stone-700 dark:text-stone-300 space-y-3 mb-6">
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Quick Setup</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Robust Interface</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Powerful Analytics</li>
          <li class="flex items-center justify-center"><span class="text-green-500 mr-2 text-lg">&#10003;</span> Premium Support</li>
        </ul>

        <div class="text-4xl font-extrabold text-burgundy-900 dark:text-burgundy-100 mb-6">$39<span class="text-base text-stone-500 dark:text-stone-400 font-normal">/mo</span></div>
        <a href="#" class="inline-block px-8 py-3 bg-burgundy-600 text-white font-semibold rounded-full shadow-lg hover:bg-burgundy-700 focus:outline-none focus:ring-4 focus:ring-burgundy-300 dark:focus:ring-burgundy-700 transition duration-300 ease-in-out">Get Gizmo Fun!</a>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 text-center bg-orange-100 dark:bg-stone-700 border-t border-orange-200 dark:border-stone-600">
      <p class="text-orange-700 dark:text-orange-300 text-sm sm:text-base">Need more details? Check out our <a href="#" class="font-semibold underline hover:text-orange-800 dark:hover:text-orange-200">full feature list</a>!</p>
    </div>

  </div>
</div>

A luxury and premium product comparison component for fashion/beauty items, featuring elegant design, sophisticated typography, and a muted/desaturated color scheme with full responsiveness and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 rounded-xl shadow-2xl overflow-hidden">
    <div class="p-6 sm:p-8 md:p-10 lg:p-12 border-b border-gray-100 dark:border-gray-800">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-center text-gray-900 dark:text-gray-100 mb-4 tracking-tight leading-tight">
        Compare Our Luxurious Offerings
      </h2>
      <p class="text-md sm:text-lg text-center text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
        Discover the perfect choice for your discerning taste. Each product is crafted with unparalleled quality and elegance.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-px bg-gray-100 dark:bg-gray-800">

      <!-- Comparison Item 1 -->
      <div class="flex flex-col bg-white dark:bg-gray-850 p-6 sm:p-8 lg:p-10 transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-lg-dark">
        <div class="flex-shrink-0 mb-6">
          <img src="https://picsum.photos/id/1018/300/200" alt="Elegant Silk Scarf" class="w-full h-48 sm:h-56 object-cover rounded-md shadow-sm mb-4">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">The Ethereal Silk Scarf</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm italic">A touch of pure sophistication.</p>
        </div>
        <ul class="flex-grow space-y-4 text-gray-700 dark:text-gray-300 mb-8">
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>100% Charmeuse Silk</span>
          </li>
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Hand-rolled Edges</span>
          </li>
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Signature Print Design</span>
          </li>
          <li class="flex items-center text-base sm:text-lg text-gray-400 dark:text-gray-600 line-through">
            <svg class="w-6 h-6 text-gray-400 dark:text-gray-600 mr-3 flex-shrink-0" 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>
            <span>Water-resistant Finish</span>
          </li>
        </ul>
        <div class="mt-auto">
          <p class="mb-4 text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100"><span class="text-lg align-top">$</span>249</p>
          <button class="w-full py-3 px-6 rounded-lg bg-gray-900 text-white font-semibold text-lg hover:bg-gray-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            Select Scarf
          </button>
        </div>
      </div>

      <!-- Comparison Item 2 -->
      <div class="flex flex-col bg-white dark:bg-gray-850 p-6 sm:p-8 lg:p-10 transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-lg-dark">
        <div class="flex-shrink-0 mb-6">
          <img src="https://picsum.photos/id/350/300/200" alt="Premium Leather Handbag" class="w-full h-48 sm:h-56 object-cover rounded-md shadow-sm mb-4">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">The Artisan Leather Tote</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm italic">Exquisite craftsmanship, timeless design.</p>
        </div>
        <ul class="flex-grow space-y-4 text-gray-700 dark:text-gray-300 mb-8">
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Full-grain Italian Leather</span>
          </li>
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Hand-stitched Detailing</span>
          </li>
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Interior Silk Lining</span>
          </li>
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Water-resistant Finish</span>
          </li>
        </ul>
        <div class="mt-auto">
          <p class="mb-4 text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100"><span class="text-lg align-top">$</span>1299</p>
          <button class="w-full py-3 px-6 rounded-lg bg-gray-900 text-white font-semibold text-lg hover:bg-gray-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            Select Tote
          </button>
        </div>
      </div>

      <!-- Comparison Item 3 (Featured/Most Popular) -->
      <div class="relative flex flex-col bg-indigo-50 dark:bg-indigo-950 p-6 sm:p-8 lg:p-10 ring-4 ring-indigo-500 dark:ring-indigo-600 rounded-xl transition-all duration-300 ease-in-out hover:shadow-xl dark:hover:shadow-xl-dark transform scale-100 md:scale-105 origin-bottom">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-indigo-500 text-white text-xs sm:text-sm font-bold uppercase py-2 px-4 rounded-full shadow-lg whitespace-nowrap">
          Most Popular
        </div>
        <div class="flex-shrink-0 mb-6 mt-6 sm:mt-4">
          <img src="https://picsum.photos/id/405/300/200" alt="Haute Couture Dress" class="w-full h-48 sm:h-56 object-cover rounded-md shadow-sm mb-4">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">The Glimmering Evening Gown</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm italic">Unforgettable elegance for grand occasions.</p>
        </div>
        <ul class="flex-grow space-y-4 text-gray-700 dark:text-gray-300 mb-8">
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Hand-embroidered Sequins</span>
          </li>
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Custom Tailoring Options</span>
          </li>
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Silken Chiffon Fabric</span>
          </li>
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Complimentary Stylist Session</span>
          </li>
        </ul>
        <div class="mt-auto">
          <p class="mb-4 text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100"><span class="text-lg align-top">$</span>4999</p>
          <button class="w-full py-3 px-6 rounded-lg bg-indigo-600 text-white font-semibold text-lg hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-800 transition-colors duration-300 shadow-lg transform hover:-translate-y-0.5">
            Choose Gown
          </button>
        </div>
      </div>

      <!-- Comparison Item 4 -->
      <div class="flex flex-col bg-white dark:bg-gray-850 p-6 sm:p-8 lg:p-10 transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-lg-dark">
        <div class="flex-shrink-0 mb-6">
          <img src="https://picsum.photos/id/80/300/200" alt="Precious Stone Necklace" class="w-full h-48 sm:h-56 object-cover rounded-md shadow-sm mb-4">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">The Solstice Gem Necklace</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm italic">Radiant beauty from nature's heart.</p>
        </div>
        <ul class="flex-grow space-y-4 text-gray-700 dark:text-gray-300 mb-8">
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Ethically Sourced Emeralds</span>
          </li>
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>18K Gold Setting</span>
          </li>
          <li class="flex items-center text-base sm:text-lg">
            <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400 mr-3 flex-shrink-0" 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>
            <span>Adjustable Chain Length</span>
          </li>
          <li class="flex items-center text-base sm:text-lg text-gray-400 dark:text-gray-600 line-through">
            <svg class="w-6 h-6 text-gray-400 dark:text-gray-600 mr-3 flex-shrink-0" 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>
            <span>Engraving Service</span>
          </li>
        </ul>
        <div class="mt-auto">
          <p class="mb-4 text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-gray-100"><span class="text-lg align-top">$</span>1899</p>
          <button class="w-full py-3 px-6 rounded-lg bg-gray-900 text-white font-semibold text-lg hover:bg-gray-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            Select Necklace
          </button>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 md:p-10 lg:p-12 border-t border-gray-100 dark:border-gray-800 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base mb-4">
        Have questions or need assistance with your selection? Our dedicated concierge team is ready to help.
      </p>
      <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
        <svg class="w-5 h-5 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="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>
        Contact Our Concierge
      </a>
    </div>
  </div>
</div>

Brutalism Product Comparison Component

A brutalist-style product comparison component designed for booking/reservation systems, featuring a forest/green color palette, high contrast, and unusual layouts. It's fully responsive and supports dark mode.

Open Preview

                <div class="font-mono min-h-screen bg-lime-100 text-lime-950 p-4 dark:bg-lime-950 dark:text-lime-50 font-bold">
  <div class="container mx-auto max-w-7xl border-2 border-lime-950 dark:border-lime-50 p-6 shadow-[8px_8px_0_0_rgba(27,33,16,1)] dark:shadow-[8px_8px_0_0_rgba(236,252,203,1)]">
    <h1 class="text-4xl md:text-5xl lg:text-6xl text-center mb-10 uppercase leading-none border-b-4 border-lime-950 pb-4 dark:border-lime-50">
      APPOINTMENT SELECTION MATRIX
    </h1>

    <!-- Comparison Table Header -->
    <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 mb-4 text-center border-b-2 border-lime-950 pb-2 dark:border-lime-50">
      <div class="hidden md:block text-left text-xl lg:text-2xl pt-2">FEATURE<span class="md:hidden lg:inline">S</span></div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-300 dark:bg-lime-700 uppercase transform -rotate-1 skew-x-3 shadow-md border-b-8 border-r-8 dark:border-lime-50">BASIC</div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-emerald-500 text-lime-50 transform rotate-1 -skew-x-3 shadow-lg dark:bg-emerald-800 dark:text-lime-50 border-b-8 border-r-8 dark:border-lime-50">PREMIUM</div>
      <div class="border-2 border-lime-950 p-2 text-xl md:text-2xl lg:text-3xl bg-lime-800 text-lime-50 transform -rotate-2 skew-x-5 shadow-2xl dark:bg-lime-900 border-b-8 border-r-8 dark:border-lime-50">ELITE</div>
    </div>

    <!-- Comparison Rows -->
    <div class="space-y-4">

      <!-- Feature Row 1 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Duration</div>
        <div class="text-lg p-2 text-center">30 min</div>
        <div class="text-lg p-2 text-center">60 min</div>
        <div class="text-lg p-2 text-center">90 min</div>
      </div>

      <!-- Feature Row 2 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Consultation</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 3 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Priority Support</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 4 -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Follow-up</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-lime-600 dark:text-lime-400 text-xl">&#10007;</div>
        <div class="text-center text-emerald-600 dark:text-emerald-300 text-2xl">&#10003;</div>
      </div>

      <!-- Feature Row 5 (Image Example) -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-200 dark:bg-lime-800 p-2 border-l-8 border-emerald-500">
        <div class="text-lg md:text-xl p-2">Resource Access</div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=1" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-3">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=2" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform -rotate-3">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://picsum.photos/40/40?random=3" alt="Placeholder Image" class="border-2 border-lime-950 dark:border-lime-50 shadow-md transform rotate-5">
        </div>
      </div>

      <!-- Feature Row 6 (Avatar Example) -->
      <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center bg-lime-100 dark:bg-lime-900 p-2 border-r-8 border-emerald-700">
        <div class="text-lg md:text-xl p-2">Dedicated Agent</div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
        <div class="p-2 flex justify-center">
          <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-lime-950 dark:border-lime-50 shadow-md">
        </div>
      </div>

    </div>

    <!-- Action Buttons / Prices -->
    <div class="grid grid-cols-[1fr_repeat(3,minmax(0,1fr))] gap-4 items-center mt-8 border-t-2 border-lime-950 pt-4 dark:border-lime-50">
      <div class="hidden md:block text-left text-xl lg:text-2xl pt-2">PRICE</div>
      <div class="text-center flex flex-col items-center bg-lime-300 dark:bg-lime-700 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-md transform skew-y-1">
        <span class="text-3xl lg:text-4xl">$49</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
      <div class="text-center flex flex-col items-center bg-emerald-500 text-lime-50 dark:bg-emerald-800 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-lg transform -skew-y-1">
        <span class="text-3xl lg:text-4xl">$99</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
      <div class="text-center flex flex-col items-center bg-lime-800 text-lime-50 dark:bg-lime-900 p-2 border-2 border-lime-950 dark:border-lime-50 shadow-2xl transform skew-y-2">
        <span class="text-3xl lg:text-4xl">$149</span>
        <a href="#" class="mt-2 bg-lime-950 text-lime-50 px-4 py-2 text-lg uppercase shadow-[4px_4px_0_0_lime-50] border-2 border-lime-950 transform -translate-x-1 -translate-y-1 hover:translate-x-0 hover:translate-y-0 dark:shadow-[4px_4px_0_0_lime-900] dark:border-lime-50">SELECT</a>
      </div>
    </div>

    <div class="mt-10 text-sm text-center border-t-2 border-lime-950 pt-4 dark:border-lime-50">
      <p class="mb-2">*All prices are subject to change without notice.</p>
      <p>Booking slots are limited. Secure your appointment now.</p>
    </div>

  </div>
</div>

Product Comparison Component - Monospace/Developer Style

A complex, responsive product comparison component designed with a monospace/developer aesthetic, sporting a purple/violet color scheme. Ideal for sports and fitness applications, it features dark mode support and a clean, terminal-inspired look with multiple comparison points.

Open Preview

                <div class="font-['JetBrains_Mono'] bg-gray-50 dark:bg-gray-950 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl dark:shadow-purple-950/50 overflow-hidden">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  
  <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6 sm:mb-8 text-center text-purple-700 dark:text-purple-400"><span class="text-purple-500 dark:text-purple-600">\>_</span> Product Comparison Matrix</h2>
  
  <p class="mb-8 text-center text-gray-600 dark:text-gray-400 text-sm sm:text-base">Analyze and compare key features across different fitness trackers and sports gear.</p>

  <div class="overflow-x-auto relative shadow-md sm:rounded-lg border border-purple-200 dark:border-purple-900">
    <table class="w-full text-left text-sm whitespace-nowrap table-auto">
      <thead class="text-xs uppercase bg-purple-50 dark:bg-gray-900 text-purple-700 dark:text-purple-400 border-b border-purple-200 dark:border-purple-900">
        <tr>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider">Feature</th>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider text-center border-l border-purple-200 dark:border-purple-900">
            <div class="flex flex-col items-center justify-center">
              <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-purple-500 dark:border-purple-400 mb-1 lg:mb-2" src="https://picsum.photos/id/66/100" alt="Product A">
              <span class="block text-xs sm:text-sm font-semibold text-purple-700 dark:text-purple-300">GearPro Elite 5000</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">$299.99</span>
            </div>
          </th>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider text-center border-l border-purple-200 dark:border-purple-900">
            <div class="flex flex-col items-center justify-center">
              <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-purple-500 dark:border-purple-400 mb-1 lg:mb-2" src="https://picsum.photos/id/111/100" alt="Product B">
              <span class="block text-xs sm:text-sm font-semibold text-purple-700 dark:text-purple-300">AthleteTrack Pro X</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">$199.99</span>
            </div>
          </th>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider text-center border-l border-purple-200 dark:border-purple-900">
            <div class="flex flex-col items-center justify-center">
              <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-purple-500 dark:border-purple-400 mb-1 lg:mb-2" src="https://picsum.photos/id/123/100" alt="Product C">
              <span class="block text-xs sm:text-sm font-semibold text-purple-700 dark:text-purple-300">Velocity Band 3</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">$129.99</span>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- Row 1: GPS -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">GPS Tracking</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Full GPS</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Connected GPS</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-red-500 dark:text-red-400">✖ No GPS</span>
          </td>
        </tr>
        <!-- Row 2: Heart Rate -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Heart Rate Monitor</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Optical + ECG</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Optical</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Optical</span>
          </td>
        </tr>
        <!-- Row 3: Battery Life -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Battery Life (Typical)</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">7 Days</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">5 Days</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">10 Days</td>
        </tr>
        <!-- Row 4: Water Resistance -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Water Resistance</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">5 ATM</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">3 ATM</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">Swim-proof</td>
        </tr>
        <!-- Row 5: Display Type -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Display Type</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">AMOLED</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">LCD</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">OLED</td>
        </tr>
        <!-- Row 6: Sports Modes -->
        <tr class="bg-white dark:bg-gray-800 border-b-0 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Sports Modes</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">25+ modes</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">15+ modes</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">10+ modes</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="mt-8 flex flex-col sm:flex-row justify-around items-center border-t border-purple-200 dark:border-purple-900 pt-6">
    <button class="flex-1 text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 mb-3 sm:mb-0 sm:mr-4 max-w-xs w-full">View GearPro Elite 5000</button>
    <button class="flex-1 text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 mb-3 sm:mb-0 sm:mr-4 max-w-xs w-full">View AthleteTrack Pro X</button>
    <button class="flex-1 text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 max-w-xs w-full">View Velocity Band 3</button>
  </div>
</div>

Product Comparison Component

A responsive product comparison component with warm neutral colors and subtle neon/glow effects, designed for educational platforms. Includes dark mode support and semantic HTML.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-zinc-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-center text-4xl font-extrabold text-amber-900 dark:text-amber-100 mb-4 tracking-tight leading-none drop-shadow-sm transition-colors duration-300">
      Compare Learning Plans
    </h2>
    <p class="text-center text-lg text-amber-700 dark:text-amber-300 mb-12 max-w-2xl mx-auto leading-relaxed opacity-90 transition-colors duration-300">
      Find the perfect learning path that fits your budget and educational goals with a detailed side-by-side comparison.
    </p>

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

      <!-- Plan 1: Basic -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl">
        <div class="p-8 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-zinc-700 dark:to-zinc-800 transition-colors duration-300 rounded-t-3xl border-b border-amber-200 dark:border-zinc-700">
          <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Starter</h3>
          <p class="text-amber-700 dark:text-amber-300">Get started with fundamental concepts.</p>
          <div class="mt-4 flex items-baseline">
            <p class="text-5xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">$19</p>
            <p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/month</p>
          </div>
        </div>
        <ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>50+ Basic Courses</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>Access to Community Forum</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>Email Support</span>
          </li>
          <li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
            <svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.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>
            <span>No Certificates</span>
          </li>
          <li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
            <svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.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>
            <span>No 1-on-1 Mentorship</span>
          </li>
        </ul>
        <div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
          <a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
            Choose Starter
          </a>
        </div>
      </div>

      <!-- Plan 2: Pro (Recommended) -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl border-2 border-amber-500 dark:border-amber-400">
        <div class="absolute -top-3 -right-3 bg-amber-500 dark:bg-amber-400 text-white dark:text-zinc-900 px-4 py-1 rounded-full text-sm font-semibold rotate-3 shadow-lg glow-badge">
          Recommended
        </div>
        <div class="p-8 bg-gradient-to-br from-amber-200 to-amber-100 dark:from-zinc-600 dark:to-zinc-700 transition-colors duration-300 rounded-t-3xl border-b border-amber-300 dark:border-zinc-600">
          <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Pro</h3>
          <p class="text-amber-700 dark:text-amber-300">Deep dive into advanced topics and projects.</p>
          <div class="mt-4 flex items-baseline">
            <p class="text-5xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">$49</p>
            <p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/month</p>
          </div>
        </div>
        <ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>All Starter features</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>200+ Advanced Courses</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>Premium Support (24/7)</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>Course Completion Certificates</span>
          </li>
           <li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
            <svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.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>
            <span>No 1-on-1 Mentorship</span>
          </li>
        </ul>
        <div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
          <a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
            Choose Pro
          </a>
        </div>
      </div>

      <!-- Plan 3: Enterprise -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl">
        <div class="p-8 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-zinc-700 dark:to-zinc-800 transition-colors duration-300 rounded-t-3xl border-b border-amber-200 dark:border-zinc-700">
          <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Enterprise</h3>
          <p class="text-amber-700 dark:text-amber-300">Custom solutions for teams and organizations.</p>
          <div class="mt-4 flex items-baseline">
            <p class="text-4xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">Custom</p>
            <p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/solution</p>
          </div>
        </div>
        <ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>All Pro features</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>Unlimited Courses & Projects</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>Dedicated Account Manager</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-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>Custom SSO Integration</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" filling="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>1-on-1 Mentorship Sessions</span>
          </li>
        </ul>
        <div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
          <a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
            Contact Sales
          </a>
        </div>
      </div>
    </div>

     <!-- Custom Styling for Glow Effects (add this to a <style> tag or CSS file if not using CDN for this) -->
    <style>
      @keyframes pulse-glow {
        0% { box-shadow: 0 0 0px rgba(251, 191, 36, 0.4); }
        50% { box-shadow: 0 0 15px rgba(251, 191, 36, 0.7), 0 0 20px rgba(251, 191, 36, 0.5); }
        100% { box-shadow: 0 0 0px rgba(251, 191, 36, 0.4); }
      }
      .glow-button:hover {
        animation: pulse-glow 1.5s infinite;
      }
      .glow-badge {
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.6);
      }
      .dark .glow-badge {
         box-shadow: 0 0 5px rgba(251, 191, 36, 0.6);
      }
    </style>
  </div>
</div>

Product Comparison Component - Real Estate (Paper/Print-inspired)

A simple, paper/print-inspired product comparison component for real estate listings, featuring two properties. Uses purple/violet tones and supports dark mode.

Open Preview

                <div class="font-sans bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-2xl sm:text-3xl font-serif font-bold text-gray-900 dark:text-gray-100 mb-6 text-center tracking-tight leading-tight uppercase relative w-fit mx-auto">
      <span class="block pb-2">Compare Properties</span>
      <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-16 h-1 bg-purple-500 rounded-full"></span>
    </h2>

    <div class="flex flex-col lg:flex-row gap-6 lg:gap-8">

      <!-- Property Card 1 -->
      <div class="flex-1 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md lg:shadow-xl overflow-hidden
                  bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                  transition-all duration-300 ease-in-out hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600">
        <div class="relative pb-2/3 h-0">
          <img src="https://picsum.photos/id/1018/600/400" alt="Property Image" class="absolute inset-0 w-full h-full object-cover rounded-t-lg" loading="lazy">
          <span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm">New Listing</span>
        </div>
        <div class="p-4 sm:p-5 flex flex-col justify-between flex-grow">
          <div>
            <h3 class="text-xl sm:text-2xl font-serif font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight">Charming Family Home</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">1234 Maple Drive, Anytown, USA</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-400 mb-4">$450,000</p>

            <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-2 mb-6">
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>4 Beds</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>2 Baths</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>2,100 sqft</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>Built 1998</li>
            </ul>
          </div>
          <a href="#" class="mt-auto block w-full text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-300 shadow-md transform hover:scale-105">
            View Details
          </a>
        </div>
      </div>

      <!-- Comparison line/separator (hidden on mobile, visible on tablet/desktop) -->
      <div class="hidden lg:flex flex-col items-center justify-center relative">
        <div class="h-full w-0.5 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-12 h-12 bg-purple-500 dark:bg-purple-600 rounded-full text-white font-bold text-lg shadow-lg z-10 p-2 border-2 border-white dark:border-gray-900">
          VS
        </div>
      </div>
      <div class="block lg:hidden flex items-center justify-center relative my-4">
        <div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-10 h-10 bg-purple-500 dark:bg-purple-600 rounded-full text-white font-bold text-base shadow-lg z-10 p-2 border-2 border-white dark:border-gray-900">
          VS
        </div>
      </div>

      <!-- Property Card 2 -->
      <div class="flex-1 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md lg:shadow-xl overflow-hidden
                  bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                  transition-all duration-300 ease-in-out hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600">
        <div class="relative pb-2/3 h-0">
          <img src="https://picsum.photos/id/1021/600/400" alt="Property Image" class="absolute inset-0 w-full h-full object-cover rounded-t-lg" loading="lazy">
          <span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm">Reduced Price</span>
        </div>
        <div class="p-4 sm:p-5 flex flex-col justify-between flex-grow">
          <div>
            <h3 class="text-xl sm:text-2xl font-serif font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight">Modern City Apartment</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">5678 Oak Street, Metroville, USA</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-400 mb-4">$420,000</p>

            <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-2 mb-6">
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>3 Beds</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>2 Baths</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>1,800 sqft</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>Built 2015</li>
            </ul>
          </div>
          <a href="#" class="mt-auto block w-full text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-300 shadow-md transform hover:scale-105">
            View Details
          </a>
        </div>
      </div>

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

Product Comparison Component

A complex, responsive product comparison component with an organic/nature-inspired design, complementary color scheme, dark mode support, and tailored for sports/fitness applications. Features flowing lines and natural forms.

Open Preview

                <div class="bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-950 dark:to-teal-950 py-16 px-4 sm:px-6 lg:px-8 font-sans overflow-hidden">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-green-800 dark:text-green-300 mb-12 sm:mb-16 tracking-tight drop-shadow-lg leading-tight">
      Trophy Showdown: Choose Your Champion
    </h2>

    <div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-12 items-stretch justify-center">

      <!-- Product 1: Elite Performance -->
      <div class="flex-1 w-full max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden mb-12 lg:mb-0 transform hover:scale-102 transition-transform duration-500 ease-in-out border-4 border-green-400 dark:border-green-600 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-green-100/50 to-blue-100/50 dark:from-gray-900/50 dark:to-teal-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
        <div class="p-8 sm:p-10 relative z-10">
          <div class="text-center mb-8">
            <span class="inline-block bg-green-500 dark:bg-green-700 text-white text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide mb-4 transform -rotate-3 hover:rotate-3 transition-transform duration-300">Elite Performance</span>
            <h3 class="text-3xl font-bold text-green-900 dark:text-green-200 mb-2 leading-tight">Apex Athlete Pro</h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg">Unleash your full potential.</p>
          </div>

          <div class="mb-8 relative flex justify-center items-center h-48 sm:h-64 overflow-hidden rounded-xl bg-gradient-to-br from-green-200 to-blue-200 dark:from-green-800 dark:to-blue-800">
            <img src="https://picsum.photos/400/300?random=1" alt="Apex Athlete Pro product image" class="w-full h-full object-cover object-center transform scale-100 group-hover:scale-105 transition-transform duration-700 ease-out rounded-xl blur-sm group-hover:blur-none">
            <div class="absolute inset-0 flex items-center justify-center">
              <svg class="w-16 h-16 text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-60 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </div>
          </div>

          <ul class="space-y-4 mb-10 text-gray-700 dark:text-gray-300 text-lg">
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Dynamic Bio-feedback System</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">AI-Powered Training Coach</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Hydro-Resistant Durability</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">One Year Premium Subscription</span>
            </li>
          </ul>

          <div class="flex justify-center flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-8">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar 1" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110" />
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar 2" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar 3" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-4">Trusted by 100K+ athletes.</span>
          </div>

          <button class="w-full flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-2xl text-white bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 md:py-4 md:text-lg md:px-10 shadow-lg transform active:scale-95 transition-all duration-300 ease-out group-hover:scale-105 group-hover:-translate-y-1">
            Select Apex Pro
            <svg class="ml-3 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Comparison Connector -->
      <div class="flex justify-center items-center mx-auto text-center w-full lg:w-auto mb-12 lg:mb-0">
        <div class="w-24 h-24 lg:w-32 lg:h-32 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-700 dark:to-blue-700 rounded-full flex items-center justify-center text-white text-3xl font-bold border-4 border-white dark:border-gray-900 shadow-2xl animate-pulse flex-shrink-0">
          VS
        </div>
        <div class="hidden lg:block w-4 h-full bg-gradient-to-t from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600 rounded-full mx-4 xl:mx-8 shadow-inner"></div>
      </div>

      <!-- Product 2: Peak Challenger -->
      <div class="flex-1 w-full max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform hover:scale-102 transition-transform duration-500 ease-in-out border-4 border-blue-400 dark:border-blue-600 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-100/50 to-orange-100/50 dark:from-gray-900/50 dark:to-orange-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
        <div class="p-8 sm:p-10 relative z-10">
          <div class="text-center mb-8">
            <span class="inline-block bg-blue-500 dark:bg-blue-700 text-white text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide mb-4 transform rotate-3 hover:-rotate-3 transition-transform duration-300">Peak Challenger</span>
            <h3 class="text-3xl font-bold text-blue-900 dark:text-blue-200 mb-2 leading-tight">Zenith Force Max</h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg">Conquer new limits.</p>
          </div>
          
          <div class="mb-8 relative flex justify-center items-center h-48 sm:h-64 overflow-hidden rounded-xl bg-gradient-to-br from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800">
            <img src="https://picsum.photos/400/300?random=2" alt="Zenith Force Max product image" class="w-full h-full object-cover object-center transform scale-100 group-hover:scale-105 transition-transform duration-700 ease-out rounded-xl blur-sm group-hover:blur-none">
            <div class="absolute inset-0 flex items-center justify-center">
              <svg class="w-16 h-16 text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-60 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </div>
          </div>

          <ul class="space-y-4 mb-10 text-gray-700 dark:text-gray-300 text-lg">
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Advanced Calorie Tracking</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Real-time Heart Rate Monitoring</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Adaptive Workout Routines</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Six Months Premium Subscription</span>
            </li>
          </ul>

          <div class="flex justify-center flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-8">
            <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar 4" class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 shadow-md transition-transform transform hover:scale-110" />
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar 5" class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-4">Empowering 75K+ successes.</span>
          </div>

          <button class="w-full flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-2xl text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 md:py-4 md:text-lg md:px-10 shadow-lg transform active:scale-95 transition-all duration-300 ease-out group-hover:scale-105 group-hover:-translate-y-1">
            Choose Zenith Max
            <svg class="ml-3 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

    </div>

    <div class="mt-20 text-center">
      <h3 class="text-3xl font-bold text-green-900 dark:text-green-300 mb-6">Need more detail?</h3>
      <p class="text-lg text-gray-700 dark:text-gray-400 max-w-2xl mx-auto mb-8">
        Dive deeper into the specifications with our comprehensive chart below or contact our sports tech experts for personalized advice.
      </p>
      <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 dark:from-green-700 dark:to-blue-700 dark:hover:from-green-800 dark:hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400 dark:focus:ring-green-600 transform hover:-translate-y-1 transition-all duration-300 ease-out">
        <svg class="-ml-1 mr-3 h-5 w-5" 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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
        View Full Comparison Chart
      </button>
    </div>

  </div>
</div>

Product Comparison Component - Cyberpunk Retro Charity

A simple, responsive product comparison component designed with a cyberpunk aesthetic using a retro/vintage color palette, intended for non-profit/charity organizations. Features dark mode support and a clean, minimalist layout.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-900 font-sans p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl">
  <h2 class="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide uppercase">
    Choose Your Impact
  </h2>

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

    <!-- Left Product/Option -->
    <div class="flex-1 max-w-sm w-full lg:w-1/2 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-6 border-2 border-fuchsia-500 dark:border-fuchsia-700 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-fuchsia-300/10 via-fuchsia-500/10 to-transparent pointer-events-none rounded-lg"></div>
      <div class="relative z-10">
        <h3 class="text-2xl font-bold text-fuchsia-600 dark:text-fuchsia-400 mb-4 tracking-wider uppercase">Basic Support</h3>
        <img src="https://picsum.photos/seed/charity1/300/200" alt="Basic Support" class="w-full h-40 object-cover rounded-md mb-4 border border-fuchsia-400/50">
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
          Provide essential resources like a warm meal and a blanket for someone in need.
          Every small contribution makes a significant difference in their daily lives.
        </p>
        <ul class="text-gray-600 dark:text-gray-400 text-sm mb-6 space-y-2">
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-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>Warm Meal</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-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>Comfort Blanket</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-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>Hygiene Kit</li>
        </ul>
        <p class="text-center text-3xl font-extrabold text-fuchsia-700 dark:text-fuchsia-300 mb-6">$15 <span class="text-base font-normal text-gray-500 dark:text-gray-400">/ once</span></p>
        <button class="w-full py-3 px-6 bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold rounded-md transition duration-300 ease-in-out transform hover:scale-105 shadow-lg relative overflow-hidden group">
          <span class="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10">Select Basic Support</span>
        </button>
      </div>
    </div>

    <!-- Right Product/Option -->
    <div class="flex-1 max-w-sm w-full lg:w-1/2 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-6 border-2 border-teal-500 dark:border-teal-700 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-teal-300/10 via-teal-500/10 to-transparent pointer-events-none rounded-lg"></div>
      <div class="relative z-10">
        <h3 class="text-2xl font-bold text-teal-600 dark:text-teal-400 mb-4 tracking-wider uppercase">Enhanced Impact</h3>
        <img src="https://picsum.photos/seed/charity2/300/200" alt="Enhanced Impact" class="w-full h-40 object-cover rounded-md mb-4 border border-teal-400/50">
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
          Contribute to long-term solutions, vocational training, and safe shelter programs.
          Empower individuals to rebuild their lives and achieve self-sufficiency.
        </p>
        <ul class="text-gray-600 dark:text-gray-400 text-sm mb-6 space-y-2">
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-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>Vocational Training</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-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>Safe Shelter Access</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-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>Mentorship Programs</li>
        </ul>
        <p class="text-center text-3xl font-extrabold text-teal-700 dark:text-teal-300 mb-6">$45 <span class="text-base font-normal text-gray-500 dark:text-gray-400">/ once</span></p>
        <button class="w-full py-3 px-6 bg-teal-600 hover:bg-teal-700 text-white font-bold rounded-md transition duration-300 ease-in-out transform hover:scale-105 shadow-lg relative overflow-hidden group">
          <span class="absolute inset-0 bg-gradient-to-r from-teal-500 to-cyan-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10">Select Enhanced Impact</span>
        </button>
      </div>
    </div>

  </div>
</div>

Cyberpunk Product Comparison Component

A simple, futuristic product comparison component for event/conference websites, featuring a dark background, cool neutral colors, and neon accent for a cyberpunk aesthetic. Responsive with dark mode support.

Open Preview

                <div class="bg-gray-950 dark:bg-black text-gray-200 py-12 px-4 sm:px-6 lg:px-8 font-mono">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-12 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 text-transparent bg-clip-text leading-tight">
      Choose Your Cyber-Experience
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-gray-900 dark:bg-gray-950 rounded-lg shadow-lg border border-blue-500/30 dark:border-blue-700/50 transform hover:scale-105 transition-transform duration-300 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-900/10 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-blue-400 dark:text-blue-500 uppercase tracking-wider">Solo-Sync Pass</h3>
          <p class="text-gray-400 mb-6 text-sm">Access to main virtual tracks & networking hub.</p>
          <div class="text-4xl font-extrabold text-white mb-6 animate-pulse-light">
            $99
            <span class="text-base text-gray-500">/event</span>
          </div>
          <ul class="text-gray-300 mb-8 space-y-3">
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-blue-400 dark:text-blue-500" 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>All Virtual Stages</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-blue-400 dark:text-blue-500" 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>Basic AI-Net Access</li>
            <li class="flex items-center opacity-70"><svg class="w-5 h-5 mr-2 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.586 8.707 7.293z" clip-rule="evenodd"></path></svg>No Dedicated Support</li>
          </ul>
          <a href="#" class="block w-full text-center py-3 px-6 rounded-md text-sm font-semibold bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-150 ease-in-out text-white border border-gray-600 hover:border-gray-500">
            Activate Solo-Sync
          </a>
        </div>
      </div>

      <!-- Product Card 2 (Recommended) -->
      <div class="bg-gray-900 dark:bg-gray-950 rounded-lg shadow-lg border-2 border-purple-500 dark:border-purple-700 transform hover:scale-105 transition-transform duration-300 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-900/10 via-pink-900/10 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="absolute top-0 right-0 mt-4 mr-4 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider shadow-lg neon-pulse">
          Recommended
        </div>
        <div class="p-6 relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-purple-400 dark:text-purple-500 uppercase tracking-wider">Nexus Pro Pass</h3>
          <p class="text-gray-400 mb-6 text-sm">Full virtual access, exclusive workshops & premium support.</p>
          <div class="text-4xl font-extrabold text-white mb-6 animate-pulse-strong">
            $249
            <span class="text-base text-gray-500">/event</span>
          </div>
          <ul class="text-gray-300 mb-8 space-y-3">
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-purple-400 dark:text-purple-500" 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>All Virtual Stages & Workshops</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-purple-400 dark:text-purple-500" 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>Enhanced AI-Net Access</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-purple-400 dark:text-purple-500" 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>Priority Digi-Support</li>
          </ul>
          <a href="#" class="block w-full text-center py-3 px-6 rounded-md text-sm font-semibold bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-purple-400 transition duration-150 ease-in-out text-white neon-button">
            Engage Nexus Protocol
          </a>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-900 dark:bg-gray-950 rounded-lg shadow-lg border border-pink-500/30 dark:border-pink-700/50 transform hover:scale-105 transition-transform duration-300 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-900/10 via-blue-900/10 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-pink-400 dark:text-pink-500 uppercase tracking-wider">Omni-Realm Elite</h3>
          <p class="text-gray-400 mb-6 text-sm">All-inclusive pass for virtual & physical access (if applicable).</p>
          <div class="text-4xl font-extrabold text-white mb-6 animate-pulse-light">
            $499
            <span class="text-base text-gray-500">/event</span>
          </div>
          <ul class="text-gray-300 mb-8 space-y-3">
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-pink-400 dark:text-pink-500" 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>Full Access (Virtual + Physical)</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-pink-400 dark:text-pink-500" 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>Exclusive Data Streams</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-pink-400 dark:text-pink-500" 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>24/7 Quantum Support</li>
          </ul>
          <a href="#" class="block w-full text-center py-3 px-6 rounded-md text-sm font-semibold bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400 transition duration-150 ease-in-out text-white border border-gray-600 hover:border-gray-500">
            Unlock Omni-Realm
          </a>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Basic Keyframe Animations for Neon Effect */
    @keyframes pulse-light {
      0%, 100% {
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.4), 0 0 8px rgba(255, 255, 255, 0.2);
      }
      50% {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 255, 255, 0.4);
      }
    }

    @keyframes pulse-strong {
      0%, 100% {
        text-shadow: 0 0 8px #a855f7, 0 0 16px #c084fc;
      }
      50% {
        text-shadow: 0 0 12px #a855f7, 0 0 20px #c084fc, 0 0 30px #e879f9;
      }
    }

    @keyframes neon-button-pulse {
      0%, 100% {
        box-shadow: 0 0 5px rgba(168, 85, 247, 0.7), 0 0 10px rgba(168, 85, 247, 0.5);
      }
      50% {
        box-shadow: 0 0 8px rgba(168, 85, 247, 0.9), 0 0 15px rgba(168, 85, 247, 0.7), 0 0 25px rgba(168, 85, 247, 0.3);
      }
    }

    .animate-pulse-light {
      animation: pulse-light 2s infinite alternate;
    }

    .animate-pulse-strong {
      animation: pulse-strong 2s infinite alternate;
    }

    .neon-pulse {
      text-shadow: 0 0 5px #a855f7, 0 0 10px #c084fc;
      animation: pulse-strong 3s infinite alternate;
    }

    .neon-button {
      animation: neon-button-pulse 2s infinite alternate;
    }

    /* Dark Mode specific adjustments - Tailwind already handles most with dark: prefix */
    .dark .neon-button {
        box-shadow: 0 0 5px rgba(139, 92, 246, 0.7), 0 0 10px rgba(139, 92, 246, 0.5);
    }

    .dark .neon-button:hover {
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.9), 0 0 15px rgba(139, 92, 246, 0.7), 0 0 25px rgba(139, 92, 246, 0.3);
    }

  </style>
</div>

Product Comparison Component

A playful and friendly product comparison component for sports/fitness products, featuring warm neutrals, rounded elements, and responsive design with dark mode support.

Open Preview

                <div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="container mx-auto max-w-6xl">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-center mb-8 sm:mb-12 text-stone-800 dark:text-stone-100 leading-tight">
      Choose Your Game-Changer!
    </h2>

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

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 p-6 sm:p-8 flex flex-col items-center text-center border border-stone-200 dark:border-stone-700">
        <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden mb-6 bg-stone-200 dark:bg-stone-700 flex items-center justify-center p-2">
          <img src="https://picsum.photos/id/1018/300/300" alt="Product A" class="w-full h-full object-cover rounded-full transform hover:scale-105 transition-transform duration-300">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-3">Athlete's Delight</h3>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6 leading-relaxed">
          Perfect for daily workouts and casual jogs. Reliable & comfortable.
        </p>
        <ul class="text-left text-stone-700 dark:text-stone-200 text-base space-y-3 mb-8 w-full max-w-xs">
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" 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> Lightweight Design</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" 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> Breathable Fabric</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-red-500 transform rotate-45" 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 0l-2 2a1 1 0 000 1.414l2 2a1 1 0 001.414-1.414L7.414 10l1.293-1.293a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg> Advanced Grip</li>
        </ul>
        <div class="text-4xl font-extrabold text-stone-800 dark:text-stone-100 mb-6">$79.<span class="text-2xl">99</span></div>
        <button class="px-8 py-4 bg-orange-400 hover:bg-orange-500 text-white font-bold rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
          Select Basic
        </button>
      </div>

      <!-- Product Card 2 (Featured) -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 p-6 sm:p-8 flex flex-col items-center text-center border-4 border-orange-400 dark:border-orange-500 relative transform scale-105 lg:scale-100">
        <span class="absolute top-0 left-1/2 -mt-4 -translate-x-1/2 bg-orange-400 dark:bg-orange-500 text-white text-sm font-bold px-4 py-2 rounded-full shadow-md tracking-wide uppercase">Best Value!</span>
        <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden mb-6 bg-stone-200 dark:bg-stone-700 flex items-center justify-center p-2">
          <img src="https://picsum.photos/id/1025/300/300" alt="Product B" class="w-full h-full object-cover rounded-full transform hover:scale-105 transition-transform duration-300">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-3">Pro Performer</h3>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6 leading-relaxed">
          Engineered for peak performance and competitive sports.
        </p>
        <ul class="text-left text-stone-700 dark:text-stone-200 text-base space-y-3 mb-8 w-full max-w-xs">
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" 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> Lightweight Design</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" 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> Breathable Fabric</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" 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> Advanced Grip</li>
        </ul>
        <div class="text-5xl font-extrabold text-stone-800 dark:text-stone-100 mb-6">$129.<span class="text-3xl">99</span></div>
        <button class="px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-bold rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700">
          Go Pro!
        </button>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 p-6 sm:p-8 flex flex-col items-center text-center border border-stone-200 dark:border-stone-700">
        <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden mb-6 bg-stone-200 dark:bg-stone-700 flex items-center justify-center p-2">
          <img src="https://picsum.photos/id/1040/300/300" alt="Product C" class="w-full h-full object-cover rounded-full transform hover:scale-105 transition-transform duration-300">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-3">Elite Champion</h3>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6 leading-relaxed">
          Top-tier choice for professional athletes and serious competitors.
        </p>
        <ul class="text-left text-stone-700 dark:text-stone-200 text-base space-y-3 mb-8 w-full max-w-xs">
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" 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> Lightweight Design</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" 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> Breathable Fabric</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" 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> Advanced Grip</li>
        </ul>
        <div class="text-4xl font-extrabold text-stone-800 dark:text-stone-100 mb-6">$189.<span class="text-2xl">99</span></div>
        <button class="px-8 py-4 bg-orange-400 hover:bg-orange-500 text-white font-bold rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
          Unlock Elite
        </button>
      </div>

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

Search Components

Categories

Product Comparison

Product Comparison Component

LuxuryProductComparison

Brutalism Product Comparison Component

Product Comparison Component - Monospace/Developer Style

Product Comparison Component

Product Comparison Component - Real Estate (Paper/Print-inspired)

Product Comparison Component

Product Comparison Component - Cyberpunk Retro Charity

Cyberpunk Product Comparison Component

Product Comparison Component