Industrial_Success_Message
Un componente de mensaje de éxito simple, de estilo industrial, con neutros cálidos, diseñado para CRM/Business Tools, con estética de materia prima y capacidad de respuesta total con soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Componente Mensajes de éxito
Un componente de mensajes de éxito responsivo diseñado en estilo skeuomórfico usando Tailwind CSS, que proporciona soporte para temas oscuros.
Componente de mensaje de éxito neumórfico
Un componente simple de mensaje de éxito neumórfico con un esquema de color complementario para un tablero, con diseño receptivo y soporte de modo oscuro.
Componente Mensajes de éxito
Un componente de mensajes de éxito diseñado en modo oscuro para la lectura de blogs/contenidos. Cuenta con un esquema de color análogo y es responsivo.