Search Components

Success Messages

Confirmation of successful actions

Success Messages Component

A clean, trustworthy success message component for non-profit/charity organizations, using a purple/violet color scheme. It is responsive and supports dark mode.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800 border-t-4 border-purple-600 dark:border-purple-500">
    <div class="flex items-center justify-center mb-4">
      <svg class="w-16 h-16 text-purple-600 dark:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
    </div>
    <h2 class="mb-3 text-2xl font-bold text-center text-gray-800 dark:text-gray-100">Thank You for Your Support!</h2>
    <p class="mb-6 text-center text-gray-600 dark:text-gray-300">
      Your generous contribution has been successfully processed and will make a significant impact on our mission.
    </p>
    <div class="flex justify-center">
      <a href="#" class="inline-flex items-center px-6 py-3 text-base font-medium text-white bg-purple-600 rounded-md shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-600">
        <svg class="w-5 h-5 mr-2 -ml-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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v9a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
          </path>
        </svg>
        Back to Homepage
      </a>
    </div>
    <p class="mt-6 text-sm text-center text-gray-500 dark:text-gray-400">
      A confirmation email has been sent to your inbox. Please contact us if you have any questions.
    </p>
  </div>
</div>

Neumorphic_Charity_Success_Message

A simple, responsive success message component designed with a soft neumorphic style and a monochromatic color scheme, suitable for non-profit and charity organizations. Includes dark mode support.

Open Preview

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

Success Messages Component - Real Estate Dark Mode Candy Colors

A success message component for real estate platforms, designed with a dark background, cheerful candy colors (bubblegum pink, mint green), and responsiveness for all screen sizes, including dark mode support.

Open Preview

                <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

A moderate complexity success message component designed with a skeuomorphic, retro/vintage style, suitable for fashion/beauty brands. It includes responsive design and dark mode support.

Open Preview

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

Success Messages Component

A simple, artistic success message component with a sepia/brown color scheme, suitable for cryptocurrency/blockchain applications. Features a soft, watercolor-inspired design, full responsiveness, and dark mode support.

Open Preview

                <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

A simple, industrial-style success message component with warm neutrals, designed for CRM/Business Tools, featuring raw material aesthetics and full responsiveness with dark mode support.

Open Preview

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

IndustrialVibrantGovernmentSuccessMessage

A success message component designed for government/public services with an industrial aesthetic, vibrant colors, and dark mode support. It features a raw, utilitarian look with high-saturation accents.

Open Preview

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

Memphis Pastel Success Message

A simple, responsive success message component with a Memphis design aesthetic using pastel colors. Features playful geometric shapes and supports dark mode.

Open Preview

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

Art Deco Success Message

An Art Deco inspired success message component with a retro/vintage color palette, designed for entertainment/media platforms. It features geometric patterns, luxurious styling, and is fully responsive with dark mode support.

Open Preview

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

Success Messages Component

A complex Material Design-inspired success messages component for social media applications, featuring analogous colors, responsiveness, and dark mode support.

Open Preview

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