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 inspirado en Material Design con tonos tierra y soporte para temas oscuros, diseñado para el consumo de contenido.
SuccessMessagesComponent
Un componente de mensaje de éxito simple para el comercio electrónico, con una estética de diseño de material monocromática, diseño receptivo y soporte de tema oscuro.
Componente Mensajes de éxito
Un componente de mensaje de éxito complejo, receptivo y compatible con temas oscuros para aplicaciones de redes sociales, con un diseño 3D vibrante con Tailwind CSS. Incluye múltiples elementos interactivos.