Composants Messages de réussite Composant Messages de réussite

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.

Aperçu

HTML Code

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

Composants associés

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