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.
HTML Code
<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>Composants associés
Composant Messages de réussite
Un composant de message de réussite minimaliste avec des effets réactifs, prenant en charge les thèmes clairs et sombres à l’aide de Tailwind CSS.
Messages de réussite Composante 17
Un composant de messages de réussite audacieux et bruts conçu avec Tailwind CSS avec des effets réactifs et la prise en charge des thèmes sombres.
Composant Messages de réussite
Un composant de messages de réussite conçu en mode sombre pour la lecture de blogs/contenus. Il présente une palette de couleurs analogue et est réactif.