Luxury_Premium_Healthcare_Error_Message
Un componente de mensaje de error de lujo/estilo premium para aplicaciones de atención médica, con tipografía sofisticada, un esquema de color de alto contraste y capacidad de respuesta total con soporte para modo oscuro.
Código HTML
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-slate-900 dark:to-slate-800 font-sans">
<div class="max-w-xl w-full mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border-t-4 border-red-600 dark:border-red-700">
<div class="p-8 sm:p-10 flex flex-col items-center text-center">
<div class="text-red-600 dark:text-red-500 mb-6">
<svg class="h-20 w-20 sm:h-24 sm:w-24" 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.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</div>
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight tracking-tight">
System Malfunction
</h2>
<p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 leading-relaxed">
We apologize, an unexpected error has occurred while processing your request. Our medical systems are experiencing temporary difficulties.
</p>
<div class="w-full">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Recommended Actions:</h3>
<ul class="text-gray-600 dark:text-gray-400 space-y-3 mb-8 text-left max-w-sm mx-auto">
<li class="flex items-start">
<svg class="h-5 w-5 text-red-600 dark:text-red-500 mt-1 mr-2 flex-shrink-0" 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>
<span>Please try refreshing the page or logging in again.</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-red-600 dark:text-red-500 mt-1 mr-2 flex-shrink-0" 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>
<span>If the issue persists, contact our IT support team immediately.</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-red-600 dark:text-red-500 mt-1 mr-2 flex-shrink-0" 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>
<span>Reference error code: <code class="font-mono text-sm bg-gray-100 dark:bg-gray-700 p-1 rounded-md text-red-700 dark:text-red-300">HC-ERR-5003</code></span>
</li>
</ul>
</div>
<a href="#" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-semibold rounded-full shadow-lg text-white bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
<svg class="-ml-1 mr-3 h-5 w-5" 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 10v11l6-5 6 5V10M3 10V4a2 2 0 012-2h14a2 2 0 012 2v6"></path>
</svg>
Contact Support
</a>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-6 sm:p-8 border-t border-gray-200 dark:border-gray-600 text-sm text-gray-500 dark:text-gray-400 text-center">
<p>Your patient data security is our top priority. Rest assured, our team is working diligently to resolve this immediately.</p>
</div>
</div>
</div>Componentes relacionados
Componente de mensajes de error - Comida/Restaurante
Un componente de mensaje de error triádico complejo, inspirado en papel e impresión para sitios web de alimentos y restaurantes, con soporte para modo oscuro y capacidad de respuesta completa. Cuenta con múltiples elementos interactivos que simulan una impresión física.
Componente de mensajes de error
Un componente de mensajes de error responsivo que utiliza los principios de Material Design, con un esquema de color triádico y compatibilidad con el modo oscuro, adaptado a una cartera.
Componente de mensajes de error
Componente de mensajes de error con diseño 3D, combinación de colores monocromática, complejidad moderada para el propósito del tablero, diseño receptivo con soporte de tema oscuro.