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 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.
Composant Messages de réussite
Un composant de message de réussite simple avec une palette de couleurs pastel, des animations subtiles pour les micro-interactions et un design réactif avec prise en charge du thème sombre. Il est conçu pour qu’un portefeuille reconnaisse les actions de l’utilisateur.
Composant Messages de réussite
Un composant permettant d’afficher des messages de réussite avec un style de conception 3D, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.