Rechercher des composants

Catégories

Composants Affichage des prix

Affichage des prix

Composant affichant les informations sur les prix des produits

Composant d’affichage des prix

Un composant d’affichage de prix simple et réactif pour les annonces immobilières, avec des couleurs de terre et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 font-sans antialiased">
  <div class="max-w-xs mx-auto bg-white dark:bg-stone-800 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02]">
    <div class="p-4 sm:p-5 flex flex-col items-center">
      <p class="text-sm uppercase tracking-wider font-semibold text-stone-600 dark:text-stone-400 mb-1">Starting From</p>
      <div class="flex items-baseline mb-4">
        <span class="text-2xl sm:text-3xl font-bold text-green-700 dark:text-green-500 mr-1">$</span>
        <span class="text-4xl sm:text-5xl font-extrabold text-stone-900 dark:text-stone-100 lining-nums tabular-nums">450,000</span>
      </div>
      <p class="text-sm text-stone-500 dark:text-stone-400 text-center leading-relaxed">
        Estimated Price per unit
      </p>
    </div>
    <div class="border-t border-stone-200 dark:border-stone-700 p-4 sm:p-5 text-center bg-stone-50 dark:bg-stone-700">
      <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600 transform transition-transform duration-200 hover:-translate-y-0.5">
        Learn More
        <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <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 fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>

Cyberpunk Composant d’affichage des prix

Un composant d’affichage de prix réactif pour le conseil/les services avec une esthétique néon cyberpunk et futuriste. Dispose d’arrière-plans sombres, de couleurs d’accentuation analogues lumineuses et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased text-purple-200 bg-gray-950 dark:bg-black py-16 px-4 sm:px-8 lg:px-16">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-12 sm:mb-16 tracking-tight drop-shadow-lg text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-500 via-rose-500 to-amber-400 dark:from-fuchsia-400 dark:via-rose-400 dark:to-orange-300">
      Our Cybernetic Solutions
    </h2>
    <p class="text-lg sm:text-xl text-center text-purple-300 dark:text-purple-400 mb-16 max-w-3xl mx-auto">
      Navigate the digital frontier with our bespoke services, engineered for peak performance and unparalleled insight. Choose your path to technological superiority.
    </p>

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

      <!-- Pricing Card 1: Standard Protocol -->
      <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 dark:from-black dark:to-gray-950 p-8 rounded-lg shadow-lg border border-fuchsia-600/50 dark:border-fuchsia-500/70 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out">
        <div class="absolute inset-0 bg-fuchsia-600/10 dark:bg-fuchsia-500/10 opacity-30 blur-sm"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-fuchsia-400">Standard Protocol</h3>
          <p class="text-purple-300 dark:text-purple-400 mb-6">Essential data streams and basic threat analysis.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-5xl font-bold text-rose-400 drop-shadow-md">$499</span>
            <span class="text-xl text-purple-400 dark:text-purple-500 ml-2">/month</span>
          </div>
          <ul class="text-purple-200 dark:text-purple-300 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-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> Basic System Audit</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-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> 24/7 Virtual Support</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-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> 10GB Secure Storage</li>
            <li class="flex items-center text-purple-500 dark:text-purple-600"><svg class="w-5 h-5 mr-3 text-purple-600 dark:text-purple-700" 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> Advanced AI Analytics</li>
          </ul>
          <button class="w-full py-3 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-fuchsia-500 to-rose-500 hover:from-fuchsia-400 hover:to-rose-400 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-gray-900 shadow-lg">
            Initiate Protocol
          </button>
        </div>
      </div>

      <!-- Pricing Card 2: Quantum Nexus (Featured) -->
      <div class="relative bg-gradient-to-br from-fuchsia-900 to-rose-900 dark:from-fuchsia-950 dark:to-rose-950 p-8 rounded-lg shadow-2xl border-2 border-rose-400 dark:border-rose-300 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out scale-102">
        <span class="absolute top-0 right-0 -mr-2 -mt-2 bg-gradient-to-br from-rose-500 to-orange-400 rounded-bl-lg px-4 py-1 text-sm font-semibold uppercase text-gray-950 dark:text-black shadow-md rotate-3">Most Popular</span>
        <div class="absolute inset-0 bg-orange-400/10 dark:bg-rose-400/10 opacity-30 blur-sm animate-pulse"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-orange-300">Quantum Nexus</h3>
          <p class="text-purple-200 dark:text-purple-300 mb-6">Full-spectrum data integration and predictive analysis.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-6xl font-bold text-amber-300 drop-shadow-lg">$999</span>
            <span class="text-xl text-orange-300 dark:text-orange-400 ml-2">/month</span>
          </div>
          <ul class="text-purple-100 dark:text-purple-200 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" 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> Complete System Overhaul</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" 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> Dedicated Cyber-Agent</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" 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> Unlimited Secure Storage</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" 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 AI Predictive Analytics</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" 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 Network Access</li>
          </ul>
          <button class="w-full py-4 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-orange-400 to-amber-300 hover:from-orange-300 hover:to-amber-200 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-300 focus:ring-offset-2 focus:ring-offset-fuchsia-900 shadow-xl">
            Access Nexus
          </button>
        </div>
      </div>

      <!-- Pricing Card 3: Elite Cipher -->
      <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 dark:from-black dark:to-gray-950 p-8 rounded-lg shadow-lg border border-orange-600/50 dark:border-orange-500/70 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out">
        <div class="absolute inset-0 bg-orange-600/10 dark:bg-orange-500/10 opacity-30 blur-sm"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-orange-400">Elite Cipher</h3>
          <p class="text-purple-300 dark:text-purple-400 mb-6">Proprietary algorithms and direct neural interface.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-5xl font-bold text-amber-400 drop-shadow-md">$1499</span>
            <span class="text-xl text-purple-400 dark:text-purple-500 ml-2">/month</span>
          </div>
          <ul class="text-purple-200 dark:text-purple-300 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-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> Bespoke System Engineering</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-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> 24/7 On-Site Specialist</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-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> Decentralized Data Vault</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-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> Quantum AI Integration</li>
          </ul>
          <button class="w-full py-3 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-orange-500 to-amber-400 hover:from-orange-400 hover:to-amber-300 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-gray-900 shadow-lg">
            Activate Cipher
          </button>
        </div>
      </div>

    </div>

    <div class="mt-20 text-center">
      <p class="text-lg text-purple-400 dark:text-purple-500 mb-6">Need a custom solution for your unique digital footprint?</p>
      <a href="#" class="inline-flex items-center px-8 py-4 border border-rose-500 rounded-full text-lg font-bold text-rose-300 hover:text-gray-950 hover:bg-gradient-to-r hover:from-rose-500 hover:to-amber-400 transition-all duration-300 transform hover:-translate-y-1 shadow-lg dark:hover:text-black dark:hover:from-rose-400 dark:hover:to-amber-300">
        <svg class="w-6 h-6 mr-3 text-current" 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>
        Contact Our Data Alchemists
      </a>
    </div>
  </div>
</div>

Composant d’affichage des prix

Un composant d’affichage des prix simple et épuré avec une esthétique monospace/développeur et une palette de couleurs rétro/vintage, conçu pour les données météorologiques/climatiques.

Ouvrir Aperçu

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
  <div class="w-full max-w-sm rounded-lg shadow-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 overflow-hidden">
    <div class="flex justify-between items-center bg-blue-200 dark:bg-blue-900 p-3 border-b border-gray-300 dark:border-gray-700">
      <span class="text-blue-800 dark:text-blue-200 text-sm font-semibold uppercase tracking-wider">[ METEO REPORT ]</span>
      <span class="text-gray-600 dark:text-gray-400 text-xs">ONLINE</span>
    </div>
    <div class="p-4 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">CURRENT TEMPERATURE</p>
      <div class="flex items-baseline justify-center mb-3">
        <span class="text-5xl md:text-6xl font-bold text-teal-600 dark:text-teal-400">18</span>
        <span class="text-2xl text-teal-600 dark:text-teal-400">&deg;C</span>
      </div>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">[ Feels Like: 17&deg;C ]</p>
      <div class="text-left space-y-1 text-sm md:text-base">
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">HUMIDITY:</span> <span class="text-purple-600 dark:text-purple-400">65%</span></p>
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">WIND SPD:</span> <span class="text-purple-600 dark:text-purple-400">12 KM/H</span></p>
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">PRESSURE:</span> <span class="text-purple-600 dark:text-purple-400">1012 HPA</span></p>
      </div>
    </div>
    <div class="bg-blue-100 dark:bg-blue-800 p-3 pt-2 text-xs border-t border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300">
      <p class="flex justify-between"><span class="text-blue-700 dark:text-blue-300">STATUS:</span> <span class="text-green-600 dark:text-green-400">CLEAR SKIES</span></p>
    </div>
  </div>
</div>

Composant d’affichage des prix

Un composant d’affichage des prix ludique et joyeux avec des éléments arrondis et une palette de couleurs analogue, adapté à un portfolio pour présenter des travaux ou des produits. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased p-4 sm:p-8 md:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100 dark:from-purple-900 dark:via-pink-900 dark:to-rose-900 min-h-screen flex items-center justify-center">
  <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Pricing Card 1: Basic -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-purple-300 dark:border-purple-600 group">
      <div class="p-6 sm:p-8 text-center bg-purple-200 dark:bg-purple-700 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-purple-900 dark:text-purple-100 mb-2">Starter</h3>
        <p class="text-purple-700 dark:text-purple-200 text-base sm:text-lg">Perfect for hobbyists & individuals.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-pink-600 dark:text-pink-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-pink-500 dark:text-pink-300">$</span>19
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>5 Project Spaces</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>10GB Storage</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>Basic Support</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-pink-500 dark:bg-pink-400 hover:bg-pink-600 dark:hover:bg-pink-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-600">
          Choose Plan
        </button>
      </div>
    </div>

    <!-- Pricing Card 2: Pro (Recommended) -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-rose-400 dark:border-rose-700 scale-105 relative z-10 group">
      <div class="absolute -top-3 right-0 bg-rose-500 dark:bg-rose-600 text-white dark:text-gray-100 text-xs sm:text-sm font-bold px-4 py-1.5 rounded-bl-lg rounded-tr-3xl shadow-md transform rotate-3 origin-top-right">Most Popular</div>
      <div class="p-6 sm:p-8 text-center bg-rose-300 dark:bg-rose-800 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-rose-900 dark:text-rose-100 mb-2">Pro</h3>
        <p class="text-rose-700 dark:text-rose-200 text-base sm:text-lg">For growing teams & ambitious projects.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-orange-600 dark:text-orange-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-orange-500 dark:text-orange-300">$</span>49
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>Unlimited Projects</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>100GB Storage</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>Priority Support</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>Custom Domains</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 hover:bg-orange-600 dark:hover:bg-orange-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600">
          Get Started Now
        </button>
      </div>
    </div>

    <!-- Pricing Card 3: Enterprise -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-yellow-300 dark:border-yellow-600 group">
      <div class="p-6 sm:p-8 text-center bg-yellow-200 dark:bg-yellow-700 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-yellow-900 dark:text-yellow-100 mb-2">Enterprise</h3>
        <p class="text-yellow-700 dark:text-yellow-200 text-base sm:text-lg">Scale your business with dedicated support.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-green-600 dark:text-green-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-green-500 dark:text-green-300">$</span>99
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>All Pro Features</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>Dedicated Account Manager</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>24/7 Premium Support</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>Custom Integrations</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 hover:bg-green-600 dark:hover:bg-green-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600">
          Contact Sales
        </button>
      </div>
    </div>
  </div>
</div>

Composant d’affichage des prix Neumorphic

Un composant d’affichage des prix complexe, réactif et compatible avec le mode sombre, avec un style de conception Neumorphism et une palette de couleurs analogue, adapté à la consommation de blog/contenu. Comporte plusieurs éléments interactifs tels que des bascules et des niveaux détaillés.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-200 dark:bg-gray-800 font-sans min-h-screen flex items-center justify-center transition-colors duration-300">
  <div class="max-w-6xl w-full mx-auto p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl dark:shadow-2xl bg-gray-200 dark:bg-gray-800 neumorphic-card transition-all duration-300 relative overflow-hidden">
    
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/10 via-orange-400/10 to-red-400/10 opacity-5 dark:opacity-10 pointer-events-none rounded-3xl z-0"></div>

    <div class="relative z-10">
      <header class="mb-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 tracking-tight leading-tight">
          Choose Your Perfect Plan
        </h2>
        <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
          Unlock the full potential of our content with a plan that fits your needs. Simple, transparent pricing.
        </p>
      </header>

      <div class="flex justify-center items-center mb-10 transition-all duration-300">
        <span class="text-gray-700 dark:text-gray-300 mr-3 text-lg font-medium">Monthly</span>
        <label for="toggle-pricing" class="relative inline-flex items-center cursor-pointer neumorphic-switch-container shadow-inner dark:shadow-inner-dark hover:shadow-outer hover:dark:shadow-outer-dark rounded-full p-1 transition-all duration-300">
          <input type="checkbox" id="toggle-pricing" class="sr-only peer">
          <div class="w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:bg-gradient-to-r peer-checked:from-orange-400 peer-checked:to-red-500 peer-focus:outline-none transition-all duration-300"></div>
          <span class="absolute left-1 top-1 w-6 h-6 bg-white dark:bg-gray-200 rounded-full shadow-md transform transition-transform duration-300 peer-checked:translate-x-full peer-checked:bg-yellow-300 dark:peer-checked:bg-orange-300"></span>
        </label>
        <span class="block relative text-gray-700 dark:text-gray-300 ml-3 text-lg font-medium">
          Annually
          <span class="px-2 py-1 ml-2 text-xs font-semibold rounded-full bg-orange-400 dark:bg-red-500 text-white neumorphic-discount-tag shadow-inner dark:shadow-inner-dark transform -rotate-6 absolute -top-4 -right-10 whitespace-nowrap">Save 20%!</span>
        </span>
      </div>

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

        <!-- Basic Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col">
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Basic</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Access to essential articles and limited features.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-orange-500 dark:text-orange-400 neumorphic-text-shadow transition-colors duration-300">$9</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/month</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>Unlimited Basic Content Access</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>Ad-supported reading</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>Email Newsletter</span>
            </li>
            <li class="flex items-center text-gray-500 dark:text-gray-400">
              <svg class="w-5 h-5 text-gray-400 dark:text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              <span>No offline reading</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-orange-700 dark:text-orange-200 hover:text-white dark:hover:text-white hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-400 dark:hover:from-orange-500 dark:hover:to-red-600 transition-all duration-300">
            Choose Basic
          </button>
        </div>

        <!-- Pro Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col relative overflow-hidden border-2 border-transparent hover:border-orange-400 dark:hover:border-red-500 ring-2 ring-transparent hover:ring-orange-300 dark:hover:ring-red-400">
          <div class="absolute top-0 right-0 py-2 px-6 bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-orange-500 dark:to-red-600 text-white font-bold text-sm rounded-bl-xl shadow-md transform rotate-3 origin-top-right translate-x-2 -translate-y-2 neumorphic-discount-tag dark:neumorphic-discount-tag-dark">
            Most Popular
          </div>
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Pro</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Full access to premium content and rich features.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-red-500 dark:text-red-400 neumorphic-text-shadow transition-colors duration-300">$19</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/month</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>All Basic Features</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>Ad-free experience</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>Offline reading & downloads</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>Priority Email Support</span>
            </li>
            <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>Early access to new content</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-white bg-gradient-to-r from-orange-400 to-red-500 dark:from-orange-500 dark:to-red-600 hover:from-yellow-300 hover:to-orange-400 dark:hover:from-red-600 dark:hover:to-red-700 transition-all duration-300">
            Choose Pro
          </button>
        </div>

        <!-- Enterprise Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col">
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Enterprise</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Custom solution for teams and large organizations.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-orange-500 dark:text-orange-400 neumorphic-text-shadow transition-colors duration-300">Custom</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/quote</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>All Pro Features</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>Dedicated Account Manager</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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 Integrations</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>Advanced Analytics</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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>24/7 Premium Support</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-orange-700 dark:text-orange-200 hover:text-white dark:hover:text-white hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-400 dark:hover:from-orange-500 dark:hover:to-red-600 transition-all duration-300">
            Contact Sales
          </button>
        </div>

      </div>

      <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-12">
        *Prices exclude VAT. Cancel anytime. No hidden fees.
      </p>
    </div>

  </div>
</div>

<style>
  /* Base Neumorphic Card */
  .neumorphic-card {
    box-shadow: 10px 10px 20px rgba(174, 174, 192, 0.4), -10px -10px 20px #FFFFFF;
  }
  .dark .neumorphic-card {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5), -10px -10px 20px rgba(50, 50, 50, 0.4);
  }

  /* Inner Neumorphic Card / Pricing Tier */
  .neumorphic-card-inner {
    box-shadow: inset 5px 5px 10px rgba(174, 174, 192, 0.2), inset -5px -5px 10px #FFFFFF;
  }
  .dark .neumorphic-card-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 10px rgba(50, 50, 50, 0.3);
  }

  /* Inner Neumorphic Card Hover State */
  .neumorphic-card-hover:hover {
    box-shadow: 8px 8px 16px rgba(174, 174, 192, 0.2), -8px -8px 16px #FFFFFF, inset 2px 2px 5px rgba(174, 174, 192, 0.1), inset -2px -2px 5px #FFFFFF;
  }
  .dark .neumorphic-card-hover-dark:hover {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4), -8px -8px 16px rgba(50, 50, 50, 0.3), inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(50, 50, 50, 0.2);
  }

  /* Buttons - Neumorphic Style */
  .neumorphic-button {
    box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px #FFFFFF;
  }
  .neumorphic-button:active {
    box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.2), inset -3px -3px 6px #FFFFFF;
  }
  .dark .neumorphic-button-dark {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(50, 50, 50, 0.4);
  }
  .dark .neumorphic-button-dark:active {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(50, 50, 50, 0.3);
  }

  /* Toggle Switch Container */
  .neumorphic-switch-container {
    box-shadow: inset 4px 4px 8px rgba(174, 174, 192, 0.2), inset -4px -4px 8px #FFFFFF;
  }
  .dark .neumorphic-switch-container {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -4px -4px 8px rgba(50, 50, 50, 0.3);
  }
  .neumorphic-switch-container:hover {
    box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px #FFFFFF, inset 2px 2px 4px rgba(174, 174, 192, 0.1), inset -2px -2px 4px #FFFFFF; /* Subtle outer shadow on hover */
  }
  .dark .neumorphic-switch-container:hover {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(50, 50, 50, 0.4), inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(50, 50, 50, 0.2);
  }

  /* Discount Tag */
  .neumorphic-discount-tag {
    box-shadow: 3px 3px 6px rgba(174, 174, 192, 0.4), -3px -3px 6px #FFFFFF;
    border: 1px solid rgba(255,165,0,0.2); /* Subtle border for definition */
  }
  .dark .neumorphic-discount-tag {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5), -3px -3px 6px rgba(50, 50, 50, 0.4);
    border: 1px solid rgba(255,99,71,0.2); /* Subtle border for definition */
  }

  /* Neumorphic Icon */
  .neumorphic-icon {
      border-radius: 9999px; /* Make it circular */
      box-shadow: inset 2px 2px 4px rgba(174, 174, 192, 0.1), inset -2px -2px 4px #FFFFFF;
  }
  .dark .neumorphic-icon {
      box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(50, 50, 50, 0.2);
  }

  /* Text Shadow for prices */
  .neumorphic-text-shadow {
      text-shadow: 2px 2px 4px rgba(174, 174, 192, 0.3), -2px -2px 4px #FFFFFF;
  }
  .dark .neumorphic-text-shadow {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), -2px -2px 4px rgba(50, 50, 50, 0.3);
  }


  /* Tailwind's dark class is applied to the <html> tag or higher */
  /* Custom properties or base classes should respect this */
</style>

<script>
  // Basic functionality for the toggle switch (for a true SPA this would be a framework component)
  document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('toggle-pricing');
    if (toggle) {
      toggle.addEventListener('change', () => {
        // In a real application, you'd update pricing data here
        // For this example, we'll just log the state
        console.log('Pricing switched to:', toggle.checked ? 'Annually' : 'Monthly');

        // Example of visually altering prices (not dynamic data update)
        const proPrice = document.querySelector('.neumorphic-card-inner:nth-child(2) .neumorphic-text-shadow');
        const proTime = document.querySelector('.neumorphic-card-inner:nth-child(2) .ml-2');

        if (toggle.checked) {
          // Annual pricing (e.g., $19 * 12 * 0.8 = $182.4 -> $15 per month equivalent)
          proPrice.textContent = '$15'; 
          proTime.textContent = '/month (billed annually)';
        } else {
          // Monthly pricing
          proPrice.textContent = '$19';
          proTime.textContent = '/month';
        }
      });
    }

    // Dark mode toggle simulation (for demonstration purposes)
    // This part is for showcasing dark mode if an external toggle isn't available
    // In a real app, you'd use a robust dark mode implementation
    const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
    const enableDarkMode = () => {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    };
    const disableDarkMode = () => {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    };

    // Check local storage for theme
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme === 'dark') {
      enableDarkMode();
    } else if (storedTheme === 'light') {
      disableDarkMode();
    } else if (systemDarkMode.matches) {
      enableDarkMode(); // Default to system preference if no stored theme
    }

    // Listen for system theme changes
    systemDarkMode.addEventListener('change', (e) => {
      if (!localStorage.getItem('theme')) { // Only apply if no user preference set
        e.matches ? enableDarkMode() : disableDarkMode();
      }
    });
  });
</script>

Composant d’affichage des prix

Un composant d’affichage des prix sur le thème rétro/vintage pour le e-commerce, avec une palette de couleurs triadique. Il s’agit d’un design complexe et réactif avec prise en charge du thème sombre, construit avec Tailwind CSS.

Ouvrir Aperçu

                <div class="relative min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex flex-col items-center justify-center font-mono">
  <!-- Vintage TV/Monitor Frame -->
  <div class="relative bg-gray-800 dark:bg-gray-200 rounded-xl shadow-2xl p-6 md:p-12 border-8 border-gray-900 dark:border-gray-100 transform -rotate-3 hover:rotate-0 transition-transform duration-500 ease-in-out">
    <div class="absolute inset-0 rounded-xl border-4 border-gray-700 dark:border-gray-300 pointer-events-none"></div>
    
    <!-- Screen/Display Area -->
    <div class="relative bg-gradient-to-br from-gray-700 to-gray-900 dark:from-gray-300 dark:to-gray-500 p-4 rounded-lg shadow-inner">
      <div class="absolute inset-0 bg-black opacity-25 rounded-lg pointer-events-none"></div>
      
      <!-- Scanlines/CRT Effect -->
      <div class="absolute inset-0 z-10 pointer-events-none overflow-hidden">
        <div class="h-full w-full bg-repeating-linear-gradient-[0deg,#00000022_0px,#00000022_1px,transparent_1px,transparent_2px] animate-scanlines"></div>
      </div>

      <div class="relative z-20 text-center">
        <h2 class="text-2xl md:text-4xl font-bold text-yellow-400 dark:text-purple-600 mb-2 drop-shadow-[0_0_5px_rgba(255,255,0,0.7)] dark:drop-shadow-[0_0_5px_rgba(128,0,128,0.7)] animate-pulseY">
          FLASH SALE!
        </h2>
        <p class="text-white text-lg md:text-2xl mb-4 font-semibold opacity-90">
          Limited Stock - Grab Yours Now!
        </p>

        <!-- Product Image & Price -->
        <div class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 mb-6">
          <div class="relative">
            <img src="https://picsum.photos/seed/retroproduct/300/300" alt="Retro Widget" class="w-48 h-48 md:w-64 md:h-64 object-cover rounded-lg shadow-lg border-4 border-purple-500 dark:border-yellow-400 transform hover:scale-105 transition-transform duration-300">
            <div class="absolute -top-2 -right-2 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12 shadow-md">NEW!</div>
          </div>
          
          <div class="flex flex-col items-center">
            <p class="text-xl md:text-3xl line-through text-gray-400 dark:text-gray-600 mb-1 animate-fadeIn">
              <span class="font-bold">$99.99</span>
            </p>
            <p class="text-4xl md:text-6xl font-extrabold text-green-400 dark:text-lime-400 mb-4 animate-bounceX drop-shadow-[0_0_8px_rgba(0,255,0,0.8)] dark:drop-shadow-[0_0_8px_rgba(128,255,0,0.8)]">
              $49.99
            </p>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 uppercase tracking-wider border-2 border-blue-400 dark:border-blue-800 animate-wiggle">
              Buy Now!
            </button>
          </div>
        </div>

        <!-- Call to Action / Urgency Meter -->
        <div class="bg-gray-600 dark:bg-gray-400 rounded-full h-4 mb-2 overflow-hidden shadow-inner">
          <div class="bg-gradient-to-r from-red-500 to-yellow-500 h-full w-3/4 rounded-full animate-fillBar"></div>
        </div>
        <p class="text-sm text-white opacity-80 animate-pulseSlight">
          Only <span class="font-bold text-yellow-300 dark:text-red-300">25%</span> of stock remaining!
        </p>
      </div>
    </div>

    <!-- Retro Knobs/Buttons -->
    <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-4">
      <div class="w-8 h-8 md:w-12 md:h-12 bg-gray-600 dark:bg-gray-400 rounded-full shadow-xl border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-500 transition-colors"></div>
      <div class="w-8 h-8 md:w-12 md:h-12 bg-gray-600 dark:bg-gray-400 rounded-full shadow-xl border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-500 transition-colors"></div>
    </div>

    <!-- Antenna -->
    <div class="absolute -top-12 right-1/4 w-1 h-12 bg-gray-700 dark:bg-gray-300 rounded-t-full transform rotate-6 animate-wobble"></div>
    <div class="absolute -top-12 left-1/4 w-1 h-12 bg-gray-700 dark:bg-gray-300 rounded-t-full transform -rotate-6 animate-wobble"></div>
  </div>

  <!-- Tailwind JIT compatibility for custom gradients and keyframes -->
  <style>
    @keyframes bounceX {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(5px); }
    }
    @keyframes pulseY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes fillBar {
      0% { width: 0%; }
      100% { width: 75%; /* Adjust based on stock */ }
    }
    @keyframes wiggle {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }
    @keyframes wobble {
      0%, 100% { transform: rotate(6deg); }
      50% { transform: rotate(-6deg); }
    }
    @keyframes scanlines {
      0% { background-position: 0% 0%; }
      100% { background-position: 0% 100%; }
    }
    @keyframes pulseSlight {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }

    .animate-bounceX { animation: bounceX 3s infinite ease-in-out; }
    .animate-pulseY { animation: pulseY 2s infinite ease-in-out; }
    .animate-fadeIn { animation: fadeIn 1.5s forwards; }
    .animate-fillBar { animation: fillBar 2s forwards ease-out; }
    .animate-wiggle { animation: wiggle 2s infinite ease-in-out; }
    .animate-wobble { animation: wobble 4s infinite ease-in-out; }
    .animate-scanlines { animation: scanlines 10s linear infinite; }
    .animate-pulseSlight { animation: pulseSlight 3s infinite ease-in-out; }

    .bg-repeating-linear-gradient-\[0deg\,\#00000022_0px\,\#00000022_1px\,transparent_1px\,transparent_2px\] {
      background-image: repeating-linear-gradient(0deg, #00000022 0px, #00000022 1px, transparent 1px, transparent 2px);
    }
  </style>
</div>

Composant d’affichage des prix

Composant d’affichage des prix avec un design réactif, la prise en charge du mode sombre et une palette de couleurs vives.

Ouvrir Aperçu

                <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center py-10">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="px-6 py-8">
      <h2 class="text-center text-4xl font-extrabold text-gray-900 dark:text-white mb-4">Pro Plan</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 text-lg mb-8">Elevate your experience with advanced features.</p>
      <div class="flex justify-center items-baseline mb-8">
        <span class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400">$29</span>
        <span class="text-2xl font-medium text-gray-500 dark:text-gray-400">/month</span>
      </div>
      <ul class="space-y-4 mb-8">
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 class="text-gray-700 dark:text-gray-200 text-lg">Unlimited Projects</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 class="text-gray-700 dark:text-gray-200 text-lg">Advanced Analytics</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 class="text-gray-700 dark:text-gray-200 text-lg">24/7 Priority Support</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 class="text-gray-700 dark:text-gray-200 text-lg">Custom Integrations</span>
        </li>
      </ul>
      <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
        Get Started
      </button>
    </div>
  </div>
</div>

Composant d’affichage des prix

Un composant d’affichage des prix de style Neumorphism avec une palette de couleurs complémentaires (orange doux et bleu clair), d’une complexité modérée pour le commerce électronique. Il présente un design réactif avec prise en charge du thème sombre. Le composant affiche une image, un titre et un prix du produit à l’aide d’un bouton « Ajouter au panier ». Le mode sombre utilise des couleurs complémentaires désaturées.

Ouvrir Aperçu

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

  <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto transition-all duration-300">
    
    <!-- Product Image (Placeholder) -->
    <div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark overflow-hidden">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover">
    </div>

    <!-- Product Title -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Neumorphic Product Title</h3>
    
    <!-- Product Description (Optional - Uncomment if needed) -->
    <!-- <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">This is a brief description of the product, showcasing its features and benefits.</p> -->

    <!-- Price and Add to Cart -->
    <div class="flex items-center justify-between mb-4">
      <span class="text-3xl font-bold text-orange-600 dark:text-orange-400">$129.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark active:shadow-inner-neumorphic-btn-light dark:active:shadow-inner-neumorphic-btn-dark transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Add to Cart
      </button>
    </div>

    <!-- Additional Details (Optional) -->
    <div class="grid grid-cols-2 gap-3 text-sm text-gray-700 dark:text-gray-300">
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Category:</strong> Electronics</p>
      </div>
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Availability:</strong> In Stock</p>
      </div>
    </div>

  </div>

  <!-- TailwindCSS Config for Neumorphism Shadows (Add this to your tailwind.config.js) -->
  <div style="display: none;">
    <!-- You would typically add this to your tailwind.config.js file under 'extend' -->
    <pre>
      module.exports = {
        theme: {
          extend: {
            boxShadow: {
              'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
              'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #1a1a1a',
              'inner-neumorphic-light': 'inset 5px 5px 10px #bdbdbd, inset -5px -5px 10px #ffffff',
              'inner-neumorphic-dark': 'inset 5px 5px 10px #333333, inset -5px -5px 10px #6d6d6d',
              'neumorphic-btn-light': '6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff',
              'neumorphic-btn-dark': '6px 6px 12px #444444, -6px -6px 12px #222222',
              'inner-neumorphic-btn-light': 'inset 3px 3px 6px #8c8c8c, inset -3px -3px 6px #ffffff',
              'inner-neumorphic-btn-dark': 'inset 3px 3px 6px #3b3b3b, inset -3px -3px 6px #5f5f5f',
            }
          }
        }
      }
    </pre>
  </div>

</div>

Composant d’affichage des prix

Un composant complexe d’affichage des prix de style rétro-vintage pour les portefeuilles, doté d’une palette de couleurs triadique, d’une réactivité et d’une prise en charge du mode sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.

Ouvrir Aperçu

                <div class="bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center p-8">
  <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg shadow-lg p-8 max-w-sm w-full transform transition-all duration-500 hover:scale-105">
    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold font-mono mb-2 text-teal-600 dark:text-teal-400">Pro Plan</h2>
      <p class="text-gray-600 dark:text-gray-400">Level up your portfolio</p>
    </div>
    <div class="text-center mb-8">
      <p class="text-5xl font-extrabold mb-2 text-purple-600 dark:text-purple-400">$29<span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-300">Billed Annually</p>
    </div>
    <ul class="mb-8 space-y-4">
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        Unlimited Projects
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        10GB Storage
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        Custom Domain
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        24/7 Support
      </li>
    </ul>
    <button class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 transform hover:scale-105">
      Get Started
    </button>
  </div>
</div>

Composant d’affichage des prix

Un composant d’affichage des prix réactif pour un tableau de bord, avec des micro-interactions attrayantes et une palette de couleurs triadique, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
  <div class="flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-indigo-500 dark:border-teal-400 transition-all duration-300 ease-in-out hover:shadow-lg"/>
    <div class="flex flex-col">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Price Display</h2>
      <p class="text-sm text-gray-500 dark:text-gray-400">An example of a price display component.</p>
    </div>
  </div>
  <div class="mt-4 p-4 bg-white dark:bg-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:bg-indigo-200 dark:hover:bg-teal-500">
    <h3 class="text-xl font-bold text-indigo-600 dark:text-teal-300">$99.99</h3>
    <p class="text-sm text-gray-600 dark:text-gray-300">Special Sale Price</p>
    <div class="mt-2 flex justify-between items-center">
      <button class="px-4 py-2 bg-indigo-500 text-white rounded-md shadow-md transform transition-transform hover:scale-105 hover:bg-indigo-600 dark:bg-teal-500 dark:hover:bg-teal-600">Buy Now</button>
      <button class="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md transition-all duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-500">Details</button>
    </div>
  </div>
</div>