Rechercher des composants

Catégories

Composants Comparaison des produits

Comparaison des produits

Outil de comparaison de plusieurs produits

Composant de comparaison de produits

Un composant simple et ludique de comparaison de produits conçu avec des couleurs d’automne, adapté à la documentation ou aux sites wiki. Dispose d’éléments arrondis, d’une réactivité totale et d’une prise en charge du mode sombre.

Ouvrir Aperçu

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

LuxeComparaison de produits

Un composant de comparaison de produits de luxe et haut de gamme pour les articles de mode/beauté, avec un design élégant, une typographie sophistiquée et une palette de couleurs sourdes/désaturées avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

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

Brutalisme Comparaison de produits Composant

Un composant de comparaison de produits de style brutaliste conçu pour les systèmes de réservation, avec une palette de couleurs forêt/vert, un contraste élevé et des mises en page inhabituelles. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

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

Composant de comparaison de produits - Monospace/Developer Style

Un composant complexe et réactif de comparaison de produits conçu avec une esthétique monospace/développeur, arborant une palette de couleurs violet/violet. Idéal pour les applications de sport et de fitness, il prend en charge le mode sombre et un look épuré, inspiré des terminaux, avec plusieurs points de comparaison.

Ouvrir Aperçu

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

Composant de comparaison de produits

Un composant réactif de comparaison de produits avec des couleurs neutres chaudes et des effets de néon et de lueur subtils, conçu pour les plateformes éducatives. Inclut la prise en charge du mode sombre et du HTML sémantique.

Ouvrir Aperçu

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

Composant de comparaison de produits - Immobilier (inspiré du papier et de l’impression)

Il s’agit d’un composant simple, inspiré du papier et de l’impression, pour les annonces immobilières, mettant en vedette deux propriétés. Utilise des tons violets/violets et prend en charge le mode sombre.

Ouvrir Aperçu

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

Composant de comparaison de produits

Un composant de comparaison de produits complexe et réactif avec un design inspiré de l’agriculture et de la nature, une palette de couleurs complémentaires, une prise en charge du mode sombre et adapté aux applications de sport et de fitness. Présente des lignes fluides et des formes naturelles.

Ouvrir Aperçu

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

Composant de comparaison de produits - Cyberpunk Retro Charity

Un composant simple et réactif de comparaison de produits conçu avec une esthétique cyberpunk utilisant une palette de couleurs rétro/vintage, destiné aux organisations à but non lucratif/caritatives. Dispose d’une prise en charge du mode sombre et d’une mise en page propre et minimaliste.

Ouvrir Aperçu

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

Composant de comparaison de produits Cyberpunk

Un composant simple et futuriste de comparaison de produits pour les sites Web d’événements/conférences, avec un arrière-plan sombre, des couleurs neutres froides et un accent néon pour une esthétique cyberpunk. Réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant de comparaison de produits

Un composant de comparaison de produits ludique et convivial pour les produits de sport/fitness, avec des neutres chauds, des éléments arrondis et un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

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