Rechercher des composants

Catégories

Composants Messages de réussite

Messages de réussite

Confirmation des actions réussies

Neumorphic_Charity_Success_Message

Un composant de message de réussite simple et réactif conçu avec un style neumorphique doux et une palette de couleurs monochromatiques, adapté aux organisations à but non lucratif et caritatives. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

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

  <div class="max-w-md w-full rounded-2xl p-6 md:p-8
    bg-gray-100 shadow-xl-light dark:bg-gray-800 dark:shadow-xl-dark
    text-center border border-gray-200 dark:border-gray-700">

    <div class="mb-6">
      <svg class="mx-auto h-20 w-20 text-indigo-500 mb-4"
        fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <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>
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2
        drop-shadow-sm dark:drop-shadow-lg">Donation Successful!</h2>
      <p class="text-lg text-gray-600 dark:text-gray-300">
        Thank you for your generous contribution.
      </p>
    </div>

    <p class="text-gray-500 dark:text-gray-400 mb-6 leading-relaxed">
      Your support will make a significant impact on our cause and help us continue our vital work.
      We are deeply grateful for your kindness.
    </p>

    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
      <button type="button" class="w-full py-3 px-6 rounded-xl
        bg-indigo-500 text-white font-semibold text-lg
        shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark
        hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75
        transform transition-transform duration-200 ease-in-out active:scale-95">
        Share Your Impact
      </button>
      <button type="button" class="w-full py-3 px-6 rounded-xl
        bg-gray-200 text-gray-700 font-semibold text-lg
        shadow-neumorphic-button-reverse-light dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-button-reverse-dark
        hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75
        transform transition-transform duration-200 ease-in-out active:scale-95">
        View Receipt
      </button>
    </div>

  </div>

  <style>
    .shadow-xl-light {
      box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
    }
    .dark .shadow-xl-dark {
      box-shadow: 10px 10px 20px #212121, -10px -10px 20px #3f3f3f;
    }

    .shadow-neumorphic-button-light {
      box-shadow: 6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-button-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #444444;
    }

    .shadow-neumorphic-button-reverse-light {
      box-shadow: inset 6px 6px 12px #9a9a9a, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-button-reverse-dark {
      box-shadow: inset 6px 6px 12px #1c1c1c, inset -6px -6px 12px #444444;
    }
  </style>

</div>

Composant Messages de Succès - Immobilier Mode Sombre Couleurs Bonbon

Un composant de message de réussite pour les plateformes immobilières, conçu avec un fond sombre, des couleurs bonbon gaies (rose bonbon, vert menthe) et une réactivité pour toutes les tailles d’écran, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-900 p-4 dark:bg-gray-950 font-sans">
  <div class="w-full max-w-md mx-auto bg-gradient-to-br from-pink-500 to-purple-600 rounded-lg shadow-2xl p-6 dark:from-pink-700 dark:to-purple-900 border-2 border-pink-300 dark:border-purple-600 animate-fade-in-down">
    <div class="flex flex-col items-center text-center">
      <div class="relative flex items-center justify-center w-24 h-24 rounded-full bg-gradient-to-br from-green-300 to-teal-400 mb-6 shadow-lg dark:from-green-600 dark:to-teal-800 animate-scale-in p-2">
        <svg class="w-16 h-16 text-white animate-bounce-in" 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>
      </div>
      <h2 class="text-3xl sm:text-4xl font-extrabold text-white mb-3 tracking-tight leading-tight drop-shadow-lg animate-fade-in-up">
        Success!
      </h2>
      <p class="text-base sm:text-lg text-pink-100 mb-6 leading-relaxed">
        Your property listing has been successfully published and is now live for potential buyers!
      </p>

      <div class="inline-flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 w-full justify-center">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-semibold rounded-full shadow-lg text-white bg-green-500 hover:bg-green-600 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-green-300 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-900">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
          </svg>
          View Listing
        </a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-pink-200 text-base font-semibold rounded-full shadow-lg text-pink-100 bg-transparent hover:bg-pink-700 hover:border-pink-700 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:border-purple-400 dark:hover:bg-purple-800 dark:hover:border-purple-800 dark:focus:ring-purple-600">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
            <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path>
          </svg>
          Edit Listing
        </a>
      </div>

      <p class="text-xs text-pink-200 mt-6 hidden sm:block dark:text-purple-300">
        You will receive an email confirmation shortly.
      </p>
    </div>
  </div>
</div>

<style>
  /* Simple custom keyframes for animation, can be added to a global CSS file or via PostCSS/Tailwind JIT if needed */
  @keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scale-in {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes bounce-in {
    0%, 20%, 40%, 60%, 80%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
      transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
      transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
      transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.7s ease-out forwards;
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.7s ease-out 0.2s forwards;
  }
  .animate-scale-in {
    animation: scale-in 0.6s ease-out 0.1s forwards;
  }
  .animate-bounce-in {
    animation: bounce-in 1s ease-out 0.3s forwards;
  }
</style>

Skeuomorphic_Retro_Success_Message_Component

Un composant de message de réussite de complexité modérée conçu avec un style skeuomorphe, rétro/vintage, adapté aux marques de mode/beauté. Il comprend un design réactif et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-stone-700 dark:to-stone-800 rounded-3xl p-6 sm:p-8 md:p-10 shadow-[8px_8px_16px_rgba(0,0,0,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(60,60,60,0.4)] border border-yellow-300 dark:border-stone-600 transition-all duration-300 ease-in-out">

    <!-- Inner embossed area -->
    <div class="p-4 sm:p-6 bg-gradient-to-br from-yellow-50 dark:from-stone-800 to-yellow-100 dark:to-stone-900 rounded-2xl shadow-inner-[inset_4px_4px_8px_rgba(0,0,0,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.5)] dark:shadow-inner-[inset_4px_4px_8px_rgba(0,0,0,0.4),inset_-4px_-4px_8px_rgba(80,80,80,0.3)] border border-yellow-200 dark:border-stone-700">

      <div class="text-center space-y-5 sm:space-y-6 md:space-y-8">
        <!-- Checkmark icon - Skeuomorphic style -->
        <div class="mx-auto w-24 h-24 sm:w-28 sm:h-28 flex items-center justify-center rounded-full bg-gradient-to-br from-lime-400 to-lime-600 dark:from-green-600 dark:to-green-800 shadow-[6px_6px_12px_rgba(0,0,0,0.2),-6px_-6px_12px_rgba(255,255,255,0.7)] dark:shadow-[6px_6px_12px_rgba(0,0,0,0.5),-6px_-6px_12px_rgba(60,60,60,0.4)] transition-all duration-300 ease-in-out">
          <svg class="w-14 h-14 sm:w-16 sm:h-16 text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.4)]" 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.5" d="M5 13l4 4L19 7"></path>
          </svg>
        </div>

        <h2 class="text-3xl sm:text-4xl font-bold text-teal-800 dark:text-teal-300 drop-shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-colors duration-300">Order Confirmed!</h2>

        <p class="text-lg sm:text-xl text-amber-700 dark:text-amber-200 leading-relaxed drop-shadow-[0_1px_1px_rgba(0,0,0,0.05)] transition-colors duration-300">
          Your journey into timeless elegance has just begun. We've received your order and are preparing your exquisite selections. Thank you!
        </p>

        <div class="pt-4">
          <a href="#" class="inline-flex items-center justify-center px-8 py-3 sm:px-10 sm:py-4 text-lg sm:text-xl font-semibold rounded-full
             bg-gradient-to-br from-orange-400 to-orange-600 dark:from-red-600 dark:to-red-800 text-white 
             shadow-[6px_6px_12px_rgba(0,0,0,0.2),-6px_-6px_12px_rgba(255,255,255,0.7)] dark:shadow-[6px_6px_12px_rgba(0,0,0,0.5),-6px_-6px_12px_rgba(60,60,60,0.4)] 
             hover:from-orange-500 hover:to-orange-700 dark:hover:from-red-700 dark:hover:to-red-900 
             hover:shadow-[2px_2px_8px_rgba(0,0,0,0.2),-2px_-2px_8px_rgba(255,255,255,0.7)] 
             dark:hover:shadow-[2px_2px_8px_rgba(0,0,0,0.5),-2px_-2px_8px_rgba(60,60,60,0.4)] 
             transition-all duration-300 ease-in-out transform active:scale-95
             border border-orange-300 dark:border-red-500">
            Continue Browsing
          </a>
        </div>

      </div>
    </div>

    <!-- Decorative elements mimicking 'screws' or 'hinges' -->
    <div class="absolute -top-3 -left-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full"></div></div>
    <div class="absolute -top-3 -right-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full rotate-45"></div></div>
    <div class="absolute -bottom-3 -left-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full"></div></div>
    <div class="absolute -bottom-3 -right-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full rotate-45"></div></div>

  </div>
</div>

Composant Messages de réussite

Un composant de message de réussite simple et artistique avec une palette de couleurs sépia/marron, adapté aux applications de crypto-monnaie/blockchain. Dispose d’un design doux inspiré de l’aquarelle, 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-gradient-to-br from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-md w-full mx-auto p-6 sm:p-8 md:p-10 bg-white dark:bg-stone-800 rounded-3xl shadow-xl border border-amber-200 dark:border-stone-700 overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] hover:shadow-2xl relative">
    <!-- Artistic Background Elements -->
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10 transform scale-110 blur-md">
      <img src="https://picsum.photos/seed/watercolor1/600/400" alt="Artistic watercolor blot" class="absolute top-4 left-4 w-32 h-32 object-cover rounded-full mix-blend-multiply dark:mix-blend-screen opacity-70 rotate-12">
      <img src="https://picsum.photos/seed/watercolor2/400/300" alt="Artistic watercolor blot" class="absolute bottom-2 right-2 w-24 h-24 object-cover rounded-full mix-blend-multiply dark:mix-blend-screen opacity-70 -rotate-24">
    </div>

    <div class="relative z-10 text-center">
      <!-- Success Icon -->
      <div class="mx-auto flex items-center justify-center h-20 w-20 rounded-full bg-amber-100 dark:bg-stone-700 shadow-inner ring-2 ring-amber-200 dark:ring-stone-600 mb-6 sm:mb-8 transition-all duration-300 ease-in-out">
        <svg class="h-12 w-12 text-amber-600 dark:text-amber-300 transform rotate-12 transition-all duration-300 ease-in-out" 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="1.8" d="M9 12l2 2 4-4m6 2a9 9 1.5 0 11-18 0 9 1.5 0 0118 0z"></path>
        </svg>
      </div>

      <h3 class="text-2xl sm:text-3xl font-extrabold text-amber-800 dark:text-amber-200 mb-3 leading-snug tracking-tight transition-colors duration-300 ease-in-out font-serif">
        Transaction Confirmed!
      </h3>
      <p class="text-sm sm:text-base text-amber-700 dark:text-amber-300 mb-6 sm:mb-8 leading-relaxed transition-colors duration-300 ease-in-out opacity-90">
        Your recent blockchain transaction has been successfully processed and recorded.
      </p>

      <div class="space-y-4">
        <p class="text-xs sm:text-sm text-amber-600 dark:text-amber-400 font-medium">
          Hash: <span class="font-mono text-amber-800 dark:text-amber-100 break-words line-clamp-1 hover:line-clamp-none transition-all duration-300 ease-in-out text-pretty">0xacb123def456abcdefg7890hij123klm456nop7
          </span>
        </p>
        <p class="text-xs sm:text-sm text-amber-600 dark:text-amber-400 font-medium">
          Amount: <span class="font-bold text-amber-800 dark:text-amber-100">0.005 BTC</span>
        </p>
      </div>

      <div class="mt-8 sm:mt-10">
        <button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-semibold rounded-full shadow-lg text-white 
        bg-gradient-to-br from-amber-600 to-amber-700 
        hover:from-amber-700 hover:to-amber-800 
        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 
        dark:from-stone-600 dark:to-stone-700 
        dark:hover:from-stone-700 dark:hover:to-stone-800 
        dark:focus:ring-stone-400 
        dark:focus:ring-offset-stone-900 
        hover:scale-105 transform transition-all duration-300 ease-in-out relative overflow-hidden group">
          <span class="absolute w-full h-full -top-full left-0 bg-yellow-300 opacity-20 transform scale-0 group-hover:scale-100 transition-all duration-500 ease-out origin-top"></span>
          View Transaction
          <svg class="ml-2 -mr-1 h-4 w-4 transform -rotate-45 group-hover:rotate-0 transition-transform duration-300 ease-in-out" 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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0l-7 7"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Industrial_Success_Message

Un composant de message de réussite simple, de style industriel, avec des neutres chauds, conçu pour les outils CRM/Business, avec une esthétique de matière première et une réactivité totale avec 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-800 text-stone-800 dark:text-stone-200 font-sans">
  <div class="max-w-md mx-auto border-2 border-stone-300 dark:border-stone-600 rounded-md shadow-lg overflow-hidden bg-stone-50 dark:bg-stone-900 transition-colors duration-300">
    <div class="flex items-center p-4 bg-stone-200 dark:bg-stone-700 border-b border-stone-300 dark:border-stone-600">
      <svg class="w-8 h-8 text-green-600 dark:text-green-400 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h2 class="text-lg sm:text-xl font-semibold text-stone-900 dark:text-stone-100">Success!</h2>
    </div>
    <div class="p-4 sm:p-5">
      <p class="text-sm sm:text-base mb-4 leading-relaxed">
        Your action has been processed successfully. The data has been securely saved and is now available in your records.
      </p>
      <div class="text-xs text-stone-600 dark:text-stone-400 border-t border-stone-200 dark:border-stone-700 pt-3 flex justify-between items-center">
        <span>Transaction ID: <span class="font-mono">#CRM78901</span></span>
        <time datetime="2023-10-27T10:30:00Z" class="block mt-1 sm:mt-0">Oct 27, 2023, 10:30 AM</time>
      </div>
    </div>
  </div>
</div>

IndustrielDynamiqueGouvernementSuccèsMessage

Un composant de message de réussite conçu pour les services gouvernementaux/publics avec une esthétique industrielle, des couleurs vives et une prise en charge du mode sombre. Il présente un look brut et utilitaire avec des accents à haute saturation.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 font-sans">

  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border-4 border-emerald-500 dark:border-emerald-600
              transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl">

    <div class="relative p-6 sm:p-8 md:p-10 text-center">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-600 dark:to-teal-700 opacity-20 dark:opacity-10 pointer-events-none"></div>

      <svg class="mx-auto mb-4 h-16 w-16 text-emerald-600 dark:text-emerald-400
                  transform transition-transform duration-500 ease-in-out hover:rotate-6" 
           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>

      <h3 class="text-2xl sm:text-3xl font-bold mb-3 
                 text-gray-900 dark:text-gray-50
                 tracking-tight">
        Operation Confirmed!
      </h3>
      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
        Your request has been successfully processed and recorded. Thank you for using our public service portal.
      </p>

      <div class="mt-6 flow-root">
        <a href="#" class="inline-flex items-center justify-center 
                          px-6 py-3 border border-transparent rounded-lg 
                          text-lg font-semibold 
                          bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 
                          text-white dark:text-gray-900 
                          shadow-md 
                          transition-colors duration-300 ease-in-out
                          focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700 
                          transform hover:-translate-y-0.5 hover:scale-105">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.944A9.004 9.004 0 0118.805 9H13a1 1 0 100 2h5.805A9.004 9 0 0111 16.056V18a1 1 0 11-2 0v-1.944A9.004 9.004 0 011.195 11H7a1 1 0 100-2H1.195A9.004 9.004 0 019 3.944V2a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          Return to Dashboard
        </a>
      </div>
    </div>

    <div class="relative p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-700 border-t-2 border-dashed border-gray-300 dark:border-gray-600 
                flex flex-wrap items-center justify-between text-sm sm:text-base 
                shadow-inner">
      <div class="flex items-center mb-2 sm:mb-0">
        <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 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="M7 8h10M7 12h10m-9 4h4M8 17v-4m0 0H5v4h3z"></path></svg>
        <span class="text-gray-800 dark:text-gray-200">Reference ID: <strong class="text-emerald-700 dark:text-emerald-300">GOV789-ABC456</strong></span>
      </div>
      <div class="flex items-center text-right ">
        <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="text-gray-800 dark:text-gray-200">Date: <time datetime="2023-10-27">Oct 27, 2023</time></span>
      </div>
    </div>

    <div class="flex justify-around p-4 sm:p-6 bg-gray-200 dark:bg-gray-700 border-t-4 border-gray-300 dark:border-gray-600">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transform hover:scale-105 transition-all duration-200 flex flex-col items-center">
        <svg class="h-6 w-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
        <span class="text-xs sm:text-sm font-medium">Download Receipt</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transform hover:scale-105 transition-all duration-200 flex flex-col items-center">
        <svg class="h-6 w-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="text-xs sm:text-sm font-medium">Email Support</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transform hover:scale-105 transition-all duration-200 flex flex-col items-center">
        <svg class="h-6 w-6 mb-1" 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.228 9.247a1 1 0 010-1.414L10.5 5.5l1.272 1.272a1 1 0 010 1.414L8.228 9.247zM12 21V10m-4 0h8"></path></svg>
        <span class="text-xs sm:text-sm font-medium">Quick Guide</span>
      </a>
    </div>

  </div>

</div>

Message de réussite de Memphis Pastel

Un composant de message de réussite simple et réactif avec une esthétique de design Memphis utilisant des couleurs pastel. Présente des formes géométriques ludiques et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-purple-800 dark:via-pink-800 dark:to-blue-800">
  <div class="relative w-full max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden p-6 sm:p-8 md:p-10 lg:p-12 border-4 border-dashed border-purple-300 dark:border-purple-600 animate-slide-in-up">
    
    <!-- Memphis Design Elements -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-pink-300 dark:bg-pink-600 rounded-full opacity-70"></div>
    <div class="absolute top-1/4 -right-10 w-20 h-20 bg-blue-300 dark:bg-blue-600 transform rotate-45 opacity-70"></div>
    <div class="absolute -bottom-6 -right-6 w-16 h-16 bg-yellow-200 dark:bg-yellow-500 rounded-lg opacity-70"></div>
    <div class="absolute bottom-1/2 -left-4 w-12 h-12 bg-green-200 dark:bg-green-500 rounded-full opacity-70"></div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <div class="mb-4 sm:mb-6">
        <svg class="w-16 h-16 sm:w-20 sm:h-20 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <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>
      </div>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-600 dark:text-purple-300 mb-3 sm:mb-4 leading-tight">
        Success!
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 sm:mb-8 max-w-md">
        Your action was completed successfully. Enjoy the fresh content!
      </p>
      <button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-bold rounded-full shadow-lg text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-pink-300 dark:focus:ring-pink-700 transition ease-in-out duration-300 transform hover:scale-105 active:scale-95">
        <span class="mr-2">Explore More</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <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 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"></path>
        </svg>
      </button>
    </div>
  </div>
</div>


<style>
  @keyframes slide-in-up {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-slide-in-up {
    animation: slide-in-up 0.7s ease-out forwards;
  }
</style>

Message de réussite Art Déco

Un composant de message de réussite inspiré de l’Art déco avec une palette de couleurs rétro/vintage, conçu pour les plateformes de divertissement/médias. Il présente des motifs géométriques, un style luxueux et est entièrement réactif avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 dark:bg-gray-900 bg-gray-50 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-md w-full mx-auto p-6 md:p-8 rounded-lg shadow-2xl relative overflow-hidden
              bg-gradient-to-br from-amber-50 dark:from-gray-800 to-amber-200 dark:to-gray-700
              border-4 border-amber-300 dark:border-amber-600
              transform transition-all duration-300 ease-in-out hover:scale-[1.01]">

    <!-- Art Deco Geometric Background Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-10">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <path d="M0 5 L5 0 L10 5 L5 10 Z" fill="rgba(180, 150, 60, 0.5)" class="dark:fill-amber-700"></path>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#artDecoPattern)"/>
        <path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="rgba(180, 150, 60, 0.7)" stroke-width="1.5" class="dark:stroke-amber-800"/>
      </svg>
    </div>

    <div class="relative z-10 text-center">
      <!-- Diamond / Jewel Icon -->
      <div class="mb-6 mx-auto w-20 h-20 rounded-full bg-amber-400 dark:bg-amber-600 flex items-center justify-center shadow-lg transform rotate-45 border-4 border-amber-100 dark:border-amber-800 group-hover:scale-105 transition-transform duration-300">
        <svg class="w-10 h-10 text-white dark:text-amber-100 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18.25L2.83 11.08l.7-.71L10 16.83l6.47-6.47.7.71L10 18.25zm0-16.5L2.83 8.92l.7.71L10 2.17l6.47 6.47.7-.71L10 1.75z" clip-rule="evenodd"/>
        </svg>
      </div>

      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-amber-900 dark:text-amber-100 leading-tight tracking-wider">
        <span class="block italic text-amber-700 dark:text-amber-300 text-lg mb-1">Ritz & Glamour Presents...</span>
        Success Unlocked!
      </h2>

      <p class="text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
        Your journey into the Golden Age of entertainment just got an upgrade.
        Prepare for a cinematic experience like no other.
      </p>

      <div class="flex justify-center flex-wrap gap-4">
        <button class="flex items-center px-6 py-3 rounded-full text-lg font-semibold
                       bg-amber-600 text-white dark:bg-amber-700 dark:text-amber-50
                       shadow-lg hover:shadow-xl hover:bg-amber-700 dark:hover:bg-amber-800
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5
                       border border-amber-700 dark:border-amber-800">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
          Explore New Features
        </button>

        <button class="flex items-center px-6 py-3 rounded-full text-lg font-semibold
                       bg-white text-amber-700 dark:bg-gray-700 dark:text-amber-300
                       shadow-lg hover:shadow-xl hover:bg-gray-100 dark:hover:bg-gray-600
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5
                       border border-amber-300 dark:border-amber-600">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
          Watch Now
        </button>
      </div>
    </div>
  </div>
</div>

Composant Messages de réussite

Il s’agit d’un composant complexe de messages de réussite inspiré du Material Design pour les applications de médias sociaux, avec des couleurs analogues, une réactivité et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased">

  <!-- Component Wrapper -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">

    <!-- Header Section -->
    <div class="bg-green-600 dark:bg-green-700 p-4 sm:p-6 flex items-center justify-between shadow-md">
      <h2 class="text-xl sm:text-2xl font-bold text-white flex items-center">
        <svg class="h-7 w-7 sm:h-8 sm:w-8 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <span class="hidden sm:inline-block">Success! Your Actions are Noted</span>
        <span class="sm:hidden">Success!</span>
      </h2>
      <button aria-label="Close success message" class="text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-600 focus:ring-white rounded-full p-1">
        <svg class="h-6 w-6" 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>
      </button>
    </div>

    <!-- Main Content Area -->
    <div class="p-4 sm:p-6 text-gray-700 dark:text-gray-300">

      <p class="mb-6 text-lg sm:text-xl font-semibold">
        Great job! Here's a quick summary of your recent successful operations.
      </p>

      <!-- Message Categories/Cards -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Card 1: New Post Published -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <img class="h-12 w-12 rounded-full mr-4 object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Post Published!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Just now</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            Your new article "Exploring the Cosmos: A Journey Through Galaxies" has been successfully published to your profile and is now visible to all your followers.
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              View Post
              <svg class="ml-1 h-4 w-4" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Reads: 1,234</span>
          </div>
        </div>

        <!-- Card 2: Friend Request Accepted -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <img class="h-12 w-12 rounded-full mr-4 object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Friend Request Accepted!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            John Doe has accepted your friend request. You can now send messages and see his full activity feed.
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              View Profile
              <svg class="ml-1 h-4 w-4" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Shared: 12 posts</span>
          </div>
        </div>

        <!-- Card 3: Profile Update Saved -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <svg class="h-12 w-12 text-green-500 mr-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
            </svg>
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Profile Updated!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">1 hour ago</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            Your profile picture and bio have been successfully updated. Your new look is now live!
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              Edit Profile
              <svg class="ml-1 h-4 w-4" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 16:30</span>
          </div>
        </div>

        <!-- Card 4: Event Created -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <svg class="h-12 w-12 text-green-500 mr-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
            </svg>
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Event Created!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">3 hours ago</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            Your new event "Weekend Hiking Adventure" has been successfully created and shared with your connections.
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              Manage Event
              <svg class="ml-1 h-4 w-4" 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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Attendees: 5/20</span>
          </div>
        </div>

      </div>

      <!-- Call to Action / Footer Section -->
      <div class="mt-8 flex flex-col sm:flex-row items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-6">
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 sm:mb-0 text-center sm:text-left">Need more insights? Check your activity log.</p>
        <button class="px-6 py-3 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold rounded-full shadow-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-600">
          Go to Activity Log
        </button>
      </div>

    </div>

  </div>

</div>

Composant SuccessMessagesComponent

Un composant de message de réussite simple pour le commerce électronique, avec une esthétique monochromatique de Material Design, une mise en page réactive et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="text-center">
      <div class="mb-4 text-green-500 mx-auto">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Order Confirmed!</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Your order #12345 has been successfully placed.</p>
      <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
        Continue Shopping
      </button>
    </div>
  </div>
</div>